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