📦

Webpack@5 では file-loader と url-loader がいらなくなった(小ネタ)

1 min read

Webpack@5 では @types/webpack がいらなくなった(小ネタ)」の姉妹編です。

https://zenn.dev/sprout2000/articles/648cb34cb52c6c

結論

Asset Modules - webpack.js.org

webpack.config.ts
 const config: Configuration = {
   mode: "development",
   entry: "./src/index.ts",
   output: {
+    assetModuleFilename: "images/[name][ext]",
   },
   module: {
     rules: [
       {
         test: /\.(ico|svg|jpe?g|png|webp)$/,
+        type: "asset/resource",   // <--- 'file-loader'
         // または
         // type: 'asset/inline',  // <--- 'url-loader'
       },
     ],
   },
 };

もちろん容量によって JS へのバンドル可否のコントロールもできます。

webpack.config.ts
   module: {
     rules: [
       {
         test: /\.(ico|svg|jpe?g|png|webp)$/,
-        type: "asset/resource",
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 4 * 1024,  // <--- 4kb
+          },
+        },
       },
     ],
   },

Discussion

ログインするとコメントできます