webpackの次のバージョンで入るassetModulesの紹介

この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。

Documentation

Asset Modules | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

PR

add experimental asset support by hiroppy · Pull Request #8983 · webpack/webpack

module.exports = { output: { assetModuleFilename: "images/[hash][ext]" }, module: { rules: [ { test: /\.(png|jpg|svg)$/, type: "asset/resource&quo...

github.com

モジュールタイプと以前との対応表

• asset/resource -> file-loader
• asset/inline -> url-loader
• asset/source -> raw-loader
• asset -> asset/resourceとasset/inlineを自動選択する(閾値: 8kb)

使い方

実験フラグをオンにする。

1
module.exports = {
2
  experiments: {
3
    asset: true,
4
  },
5
};

アセットを出力する (file-loader)

別ディレクトリにファイルを出力しそのファイルパスを返す。 output.assetModuleFilenameに出力ファイル名を指定することができる。

1
module.exports = {
2
  output: {
3
    assetModuleFilename: "images/[hash][ext]",
4
  },
5
  module: {
6
    rules: [
7
      {
8
        test: /\.(png|jpg|gif)$/,
9
        type: "asset/resource",
10
      },
11
    ],
12
  },
13
};

1
console.log(foo);
2
img.src = foo;

データ URI を出力する (url-loader)

Base64 アルゴリズムを使い出力される文字列を返す。(カスタマイズ可能)

1
module.exports = {
2
  module: {
3
    rules: [
4
      {
5
        test: /\.(png|jpg|gif|svg)$/,
6
        type: "asset/inline",
7
      },
8
    ],
9
  },
10
};

1
console.log(foo);
2
// data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo...vc3ZnPgo=
3

4
block.style.background = `url(${foo})`;

ソースを出力する (raw-loader)

ソースコードの中身を返す。

1
module.exports = {
2
  module: {
3
    rules: [
4
      {
5
        test: /\.txt/,
6
        type: "asset/source",
7
      },
8
    ],
9
  },
10
};

1
console.log(foo);
2
// hello!
3
block.textContent = foo;

自動的に選択させる

ファイルの大きさにより、自動的にasset/resourceかasset/inlineの実行を決定する。 8kb 以下の場合は、inline となりそれ以上は resouce となる。

閾値を変えたい場合は、parser.dataUrlCondition.maxSizeを指定することができる。

1
module.exports = {
2
  output: {
3
    assetModuleFilename: "images/[hash][ext]",
4
  },
5
  module: {
6
    rules: [
7
      {
8
        test: /\.(png|jpg|gif)$/,
9
        type: "asset",
10
        parser: {
11
          dataUrlCondition: {
12
            maxSize: 4 * 1024, // 4kb
13
          },
14
        },
15
      },
16
    ],
17
  },
18
};