1.加载资源

webpack默认只能处理 js 或者 json 类型文件，如果需要加载其它资源则需要借助 loader 或者 webpack 内置的 AssetModules。

文章目录

loader列表：https://www.webpackjs.com/loaders/printable/

2.资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

在 webpack4 中，加载字体、图标、图片等资源，需要借助 url-loader | file-loader。

但是在 webpack5 内置了这些工具，只需要设置 type 字段即可。

type 的字段可选值有：

  • asset/resource(复制文件)
  • asset/inline(将图片变成base64)
  • asset(小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型)
module.exports = {
    module: {
        rules: [
            {
                test: /.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset',
                // 小于 4kb 的就会转换成base64.
                parser: {
                 dataUrlCondition: {
                   maxSize: 4 * 1024 // 4kb
                 }
               }
            }
        ]
    }
};

3.修改输出目录

修改 js 文件的输出目录：不要修改 path 属性，该属性控制着整体的目录，应该是从 filename 入手。

在下面的实例中，可以使用 hash 也可以使用 contenthash。

hash：如果整个项目中有一个文件变化了，那么所有文件名都会变化。

contenthash：如果当前文件变化后，为当前文件重新命名。

如何选用：使用 contenthash 可以更好的利用浏览器缓存。

module.exports = {
    output: {
        // 10位哈希_文件名.js
        filename: 'static/js/[hash:10]_[name].js'
    }
};

修改资源文件的输出目录：如果使用 assetModules，可以使用以下配置项。

这里的 [ext] 代表文件的扩展名，因为 test 正则中可选的文件是多个。

module.exports = {
    module: {
        rules: [
            {
                test: /.(png|jpg?e)$/,
                type: 'asset',
                // 生产目录
                generator: {
                    filename: 'static/[hash][ext]'
                }
            }
        ]
    }
};