webpack 5からurl-loader/file-loader/raw-loaderが要らなくなった

doc: Asset Modules | webpack

Asset Modulesの概要

webpack 5から Asset Modules が追加されました。モジュールのタイプを指定するもので、webpack4以前ではloaderを使用していたファイルの読み込を置き換えるものになります。
次のような対応になります。

webpack 4 (loader)	webpack 5 (Asset Module)
url-loader	asset/inline
file-loader	asset/resource
raw-loader	asset/source
url-loader + limitオプション	asset

使用方法

webpack.config.js でloaderを使用していた部分をAssetModuleの指定に書き換えます。

wepback.with-loader.config.js

module.exports = {
  module: {
   rules: [
      {
        test: /\.svg$/,
        use: 'url-loader',
      },
   ]
  },
}

wepback.with-asset-module.config.js

module.exports = {
  module: {
   rules: [
      {
        test: /\.svg$/,
        type: 'asset/inline',
      },
   ]
  },
}

asset/resource (ファイル出力)で出力ファイル名の指定は各 rule での generator.filename の指定、または output.assetModuleFileName で可能です。

webpack.export-name.config.js

module.exports = {
  module: {
   rules: [
      {
        test: /\.svg$/,
        type: 'asset/inline',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },
   ]
  },
}

webpack.export-name.config.js

module.exports = {
  output: {
    assetModuleFilename: 'images/[hash][ext][query]'
  }
}

その他詳細は公式ドキュメントを参照してください。