webpack4和webpack5打包资源文件配置差异 webpack4和webpack5打包资源文件配

项目中会有一些资源文件，比如图片资源，字体资源文件等。这些文件在打包的时候需要移动到dist目录
webpack4中，打包这些资源文件，需要用到url-loader和file-loader,
file-loader把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)
url-loader与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体)

{ test: /\.(png|svg|gif|jpe?g)$/, use: [ { loader: "url-loader", options: { name: "img/[name].[hash:8].[ext]", // outputPath:'img' limit: 1024 * 10, }, }, ], }

webpack5中内置了处理资源文件的模块asset，不再需要file-loader和url-loader。

asset/resource -->file-loader( 输出路径 )
asset/inline --->url-loader（所有 data uri）
asset/source --->raw-loader
asset （parser ）

webpack5中如果用require加载图片，需要提取default属性才能拿到资源

 Img.src = https://www.it610.com/article/require("test.png").default;

或者要在css-loader中配置
esModule属性为false

{ test: /\.css$/, use: [ "style-loader", { loader: "css-loader", options: { importLoaders: 1, // 回退一步 esModule: false, }, }, "postcss-loader", ], },

图片资源文件处理如下

{ test: /\.(png|svg|gif|jpe?g)$/, type: "asset/resource", generator: { filename: "img/[name].[hash:8][ext]", }, },

或者换成行内嵌入到js代码中

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

【webpack4和webpack5打包资源文件配置差异】也可以配置如下

{ test: /\.(png|svg|gif|jpe?g)$/, type: "asset", generator: { filename: "img/[name].[hash:8][ext]", }, parser: { dataUrlCondition: { maxSize: 30 * 1024, }, }, }, { test: /\.(ttf|woff2?)$/, type: "asset/resource", generator: { filename: "font/[name].[hash:3][ext]", }, },