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