webpack4和webpack5打包資源文件配置差異详情 - webpack4,webpack5 HeiYanjing 日志

項目中會有一些資源文件，比如圖片資源，字體資源文件等。這些文件在打包的時候需要移動到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]",
        },
      },