关于webpack4: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 = 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",      },

也能够配置如下

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