【Webpack】打包资源的名称路径和清空打包资源

这篇具有很好参考价值的文章主要介绍了【Webpack】打包资源的名称路径和清空打包资源。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

修改输出资源的名称和路径

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    // 所有文件的输出目录
    path: path.resolve(__dirname, "dist"),
    // 入口文件打包输出的文件名
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 输出图片名称
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 修改 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <!-- 修改 js 资源路径 -->
    <script src="../dist/static/js/main.js"></script>
  </body>
</html>

3. 运行指令

npx webpack
  • 此时输出文件目录:

(注意:需要将上次打包生成的文件清空,再重新打包才有效果)

├── dist
    └── static
         ├── imgs
         │    └── 7003350e.png
         └── js
              └── main.js

自动清空上次打包资源

1. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 40 * 1024, // 小于40kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2. 运行指令

npx webpack

观察 dist 目录资源情况文章来源地址https://www.toymoban.com/news/detail-834374.html

到了这里,关于【Webpack】打包资源的名称路径和清空打包资源的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 用webpack做一些前端打包时的性能优化

    一.webpack 的五个核心概念 1.Entry:入口指示,webpack以哪个文件为入口起点开始打包,分析构建内部依赖图 2.output:输出指示,webpack打包后的资源bundles输出到哪里去,以及如何命名 3.loader :loader让webpack能够去处翻译理那些非js文件(img css…) 4.Plugins :Plugins插件可以用于执行范围

    2024年02月12日
    浏览(49)
  • node.js+NPM包管理器+Webpack打包工具+前端项目搭建

    javascript运行环境(无需依赖html文件) BFF,服务于前端的后端 官网下载安装,node -v查看是否安装成功 ①、创建一个01.js文件 ②、通过CMD命令执行(或者通过工具的集成终端) node 01.js 如果出现权限原因,可以通过管理员方式打开工具 ③、通过浏览器访问http://127.0.0.1:8888 如

    2024年02月07日
    浏览(71)
  • 【前端笔记】前端包管理工具和构建打包工具介绍之npm、yarn、webpack、vite

    NPM(Node Package Manager)是node包管理器,是node.js默认采用的软件包管理系统,使用JavaScript语言编写。包管理可以理解为依赖管理,有一个npm包管理仓库,当我们执行npm命令的时候,就可以直接从npm仓库中下载对应的依赖包,类似于后端开发中的POM。 node.js中就已经安装了NPM,所

    2024年02月02日
    浏览(40)
  • 细说前端打包发布后,浏览器缓存如何清理?其实只需要简单的webpack配置就行

    有没有这么一种场景,项目上线后,客户使用过程中发现了bug,你急急忙忙改完,发布。但你发布后 测试人员或者客户会说:“你这改了没用啊”。 你:“清下缓存试试” 客户:“????” 那么这篇文章带你认识浏览器缓存,及清除浏览器的缓存办法。让你不再为了缓存

    2024年02月09日
    浏览(59)
  • 前端构建工具 代码优化压缩 模块管理 依赖管理 资源处理转换 自动化任务 流程优化 高级特性 Webpack Parcel Rollup Gulp 静态资源

    前端构建在前端开发中具有重要的意义,主要有以下几个方面: 代码优化和压缩:前端构建工具可以对前端代码进行优化和压缩,例如去除注释、空格,合并和缩小文件大小等。这可以减少文件的加载时间和传输大小,提高网页加载速度,优化用户体验 模块管理和依赖管理

    2024年02月09日
    浏览(39)
  • webpack5基础使用(1)-介绍、打包文件、处理样式资源(css、less)文件、配置文件内容、eslint工具检测语法、babel工具es6语法转es5

    webpack5是一个 静态资源打包工具 。 会以一个或多个文件作为打包的入口,将整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以直接在浏览器端运行了 进一步来说就是: 当开发时,肯定会使用框架、es6模块化语法、less/sass等css预处

    2024年02月03日
    浏览(54)
  • 如何使用webpack打包一个库library,使用webpack打包sdk.

    用webpack打包时长会随着代码增加而变长,代码量可能比较大的可以参考我的另一篇使用vite打包sdk文章. 使用vite打包libary模式打包sdk 如果你需要自己封装一些包给别人使用,那么可以参考以下方法 经过以上步骤后会生成一个library文件夹,里面包含一个package.json文件。然后简单修

    2024年02月13日
    浏览(38)
  • webpack打包之 copy-webpack-plugin

    copy-webpack-plugin 打包复制文件插件。 1、什么时候要使用? 在离线应用中,前端所有文件都需在在本地,有些文件(比如iconFont以及一些静态img)需要转为离线文件,这些文件可以直接引用更方便些,这就需要在打包时直接复制到打包文件下。 2、安装依赖 3、配置webpack 4、打包

    2024年02月17日
    浏览(41)
  • webpack自动化打包webpack-dev-server

    在前面的章节中我们每次改完要打包的资源文件,和配置文件都是是输入 npx webpack 命令手动打包的,那么有没有什么办法可以 监听到我们代码的改动,在保存时就自动打包 呢? 答案是当然有,不然哪些框架的脚手架是怎么实现保存自动打包的呢,这就是本章要介绍的内容,

    2024年02月04日
    浏览(47)
  • 【python】webpack是什么,如何逆向出webpack打包的js代码?

    ✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN新星创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全栈,前后端开

    2024年03月25日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包