webpack基础_6修改输出资源的名称和路径

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

1. 配置

webpack.config.js

• 修改入口文件输出位置：

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },

打包后的效果：

• 修改图片文件输出位置：

没指定位置前全部都在根目录：

{
 test: /\.(png|jpe?g|gif|webp)$/,
 type: "asset"
}

如图：

指定位置后：
如果要设置某个资源的输出路径，直接在其对应的配置项里设置即可。

  {
        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]",
        },
      },

如图：

配置项说明：

2. 运行指令

npx webpack

• 此时输出文件目录：
  （注意：需要将上次打包生成的文件清空，再重新打包才有效果）

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