修改输出资源的名称和路径、自动清空上次打包资源

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

1.1 配置

javascript 复制代码

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 入口文件打包输出的文件名称
    filename: 'static/js/main.js',

  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
      // less样式
      {
        test: /\.less$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'less-loader',// 将less文件编译成css文件
        ]
      },
      // sass样式
      {
        test: /\.s[ac]ss$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'sass-loader',// 将sass文件编译成css文件
        ]
      },
      // stylus样式
      {
        test: /\.styl$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'stylus-loader',// 将Styl文件编译成css文件
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于10kb的图片会转成base64
            // 优点：减少请求数量；缺点：体积会变大
            maxSize: 10 * 1024
          }
        },
        generator: {
          // 输出图片的名称
          /*
            static/images/: 指定了输出文件的基础目录为 static/images/
            [hash:10]: hash值取前8位
            [ext]: 保留原文件的扩展名
            [query]: 保留原文件的查询字符串部分
          */
          filename: "static/iamges/[hash:8][ext][query]"
        }
      }
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}

1.2 修改index.html

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>

1.3 运行指令

html 复制代码

npx webpack

注意：需要将上次打包生成的文件清空，再重新打包才有效果。

此时输出文件目录为：

html 复制代码

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

二、自动清空上次打包资源

主要修改地方就是：clean: true,

javascript 复制代码

const path = require("path");

module.exports = {
  // 入口【相对路径】
  entry: './src/main.js',
  // 输出
  output: {
    // 文件的输出路径【绝对路径】
    // __dirname 当前文件的文件夹的绝对路径
    path: path.resolve(__dirname, 'dist'),
    // 入口文件打包输出的文件名称
    filename: 'static/js/main.js',
    // 自动清空上次打包结果
    // 原理：在打包前，将上述配置的path整个目录内容清空，再进行打包
    clean: true,
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      // css样式
      {
        test: /\.css$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
        ]
      },
      // less样式
      {
        test: /\.less$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'less-loader',// 将less文件编译成css文件
        ]
      },
      // sass样式
      {
        test: /\.s[ac]ss$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'sass-loader',// 将sass文件编译成css文件
        ]
      },
      // stylus样式
      {
        test: /\.styl$/i,// 只检测.css文件
        use: [// 执行顺序：从右到左，从下到上
          'style-loader',// 将js中css通过创建style标签添加到html文件中生效
          'css-loader',// 将css资源编译成commonjs的模块到js中
          'stylus-loader',// 将Styl文件编译成css文件
        ]
      },
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            // 小于10kb的图片会转成base64
            // 优点：减少请求数量；缺点：体积会变大
            maxSize: 10 * 1024
          }
        },
        generator: {
          // 输出图片的名称
          /*
            static/images/: 指定了输出文件的基础目录为 static/images/
            [hash:10]: hash值取10位
            [ext]: 保留原文件的扩展名
            [query]: 保留原文件的查询字符串部分
          */
          filename: "static/iamges/[hash:10][ext][query]"
        }
      }
    ]
  },
  // 插件
  plugins: [
    // plugin的配置
  ],
  /* 
    模式：
      开发模式：development
      生产模式：production
  */
  mode: "development"
}