This slide is here!

Documentation

Asset Modules

asset is a new module type.
Current Module types are javascript/auto, javascript/esm, json, and webassembly.

webpack@5 has raw-loader, file-loader, and url-loader as a native feature so unnecessary to install these loaders manually.

• asset/resource -> file-loader
• asset/inline -> url-loader
• asset/source -> raw-loader
• asset -> fallback option of url-loader

// webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: 'images/[hash][ext]',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        type: 'asset/resource',
      },
      {
        test: /\.txt/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // 4kb
          },
        },
      },
    ],
  },
  experiments: {
    asset: true,
  },
};

import foo from './images/foo.png';

console.log(foo);
// /dist/images/151cfcfa1bd74779aadb.png

The End

please support me!