Asset Modules资源模块

Posted on

Asset Modules 资源模块，针对于图片字体等这一类型的文件模块，无须额外的预处理器，webpack 可以通过一些配置完成对它们的解析，这是 webpack5 新加入的，和 file-loader,raw-loader,url-loader 预处理器功能相似

type

Asset Modules 类型通过添加 4 个新的模块 type 来取代所有这些 loader

  • asset/resource 发出一个单独的文件并导出 URL。和 file-loader 类似
  • asset/inline 和 url-loader相似，处理文件导入地址并将其替换成 data URL,默认是 Base64 格式编码的 URL
  • asset/source 和raw-loader很像，以字符串形式导出文件资源
  • asset 在导出单独的文件 和 data URL 间自动选择，可以通过修改配置项影响自动选择的标准

demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require("path");

module.exports = {
  entry: "./a.js",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.jpg$/,
        type: "asset/resource",
      },
    ],
  },
  mode: "none",
};

打包入口文件是a.js
a.js 文件内容：

1
2
3
4
5
6
7
import img from "./sky.jpg";
console.log(img);

var dom = `<img src='${img}' />`;
window.onload = function () {
  document.getElementById("main").innerHTML = dom;
};

打包后目录里生成6d99f3aefcfa4bj41a7f.jpg,这个是 sky.jpg 被 asset/resource 处理后生成的。

自定义文件名称

1. 通过 generator.filename 配置

1
2
3
4
5
6
7
8
9
module: {
  rules: [{
    test: /\.jpg$/,
    type: 'asset/resource',
    generator: {
      filename: 'static/[hash:8][ext][query]' //8位hash值与后缀名的组合
    }
  }]
},

2. 在 output 里配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
module.exports = {
  entry: "./a.js",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "bundle.js",
    assetModuleFilename: "static/[hash:6][ext][query]",
  },
  module: {
    rules: [
      {
        test: /\.jpg$/,
        type: "asset/resource",
      },
    ],
  },
  mode: "none",
};

这两种方式配置资源文件名称的效果是一样，并且只能用于 type 是 asset 和 asset/resource 的情况

asset/inline

打包后文件目录没有新增图片，原始图片被处理成 Base64 编码的 data URL 并直接存放在打包生成的 bundle.js 文件里

dataURL 默认使用 Base64 编码，可以配置 generator.dataURL 进行自定义编码算法。

asset

webpack 默认对于大于 8 KB 的资源 以 asset/resource 处理，否则以 asset/inline 处理

但是我们也可以修改这个资源大小的阙值，在 module.rule 的 parser.dataURLCondition.maxSize 中配置.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require("path");

module.exports = {
  entry: "./a.js",
  output: {
    path: path.resolve(__dirname, ""),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.(jpg|png)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 6 * 1024, // 6kb
          },
        },
      },
    ],
  },
  mode: "none",
};

Asset Modules 虽然可以代替部分预处理器的功能，但是要进行个性化配置的时候还是使用预处理器更方便。
比如，目前如果要给预处理器配置 publicPath，目前是做不到，而且 Asset Modules 存在 BUG，还需要修复。

但是 Asset Modules 是 webpack 的未来，文件资源预处理器后续已经不进行维护了，随着 Asset Modules 功能的优化，未来可能会取代 file-loader 等预处理器，我们需要留意 Asset Modules 的最新状态