webpack资源模块

在 webpack 出现之前，前端开发人员会使用 grunt 和 gulp 等工具来处理资源，并将它们从 /src 文件夹移动到 /dist 或 /build 目录中。webpack 最出色的功能之一就是，除了引入 JavaScript，还可以内置的资源模块 Asset Modules引入任何其他类型的文件。资源模块(asset module)是一种模块类型，它允许我们应用Webpack来打包其他资源文件(如字体，图标等) 资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader:

asset/resource 发送一个单独的文件并导出 URL。
asset/inline 导出一个资源的 data URI。
asset/source 导出资源的源代码。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。

1、Resource 资源

webpack.config.js配置：

// 配置资源文件 module: {
    rules: [{
      test: /\.png/,
      type: 'asset/resource'
}] },

自定义输出文件名默认情况下，asset/resource 模块以 [contenthash][ext][query] 文件名发送到输出目录。可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串:

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

另一种自定义输出文件名的方式是，将某些资源发送到指定目录，修改配置:

module.exports = {
    output: {
        // 配置资源文件
        module:{
            rules: [{
                test: /\.png/,
                type: 'asset/resource',
                    // 优先级高于 assetModuleFilename 
                generator: {
                    filename: 'images/[contenthash][ext][query]'
                }
            }]
        }
    }
}

执行编译：npx webpack,输出结果与 assetModuleFilename设置一样

资源模块

asset/resource 发送一个单独的文件并导出 URL。
asset/inline 导出一个资源的 data URI。
asset/source 导出资源的源代码。
asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。

1、Resource 资源

webpack.config.js配置：

// 配置资源文件 module: {
    rules: [{
      test: /\.png/,
      type: 'asset/resource'
}] },

自定义输出文件名默认情况下，asset/resource 模块以 [contenthash][ext][query] 文件名发送到输出目录。可以通过在 webpack 配置中设置 output.assetModuleFilename 来修改此模板字符串:

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

另一种自定义输出文件名的方式是，将某些资源发送到指定目录，修改配置:

module.exports = {
    output: {
        // 配置资源文件
        module:{
            rules: [{
                test: /\.png/,
                type: 'asset/resource',
                    // 优先级高于 assetModuleFilename 
                generator: {
                    filename: 'images/[contenthash][ext][query]'
                }
            }]
        }
    }
}

执行编译：npx webpack,输出结果与 assetModuleFilename设置一样 /Users/liuyamei/资料素材/webpackNote/2022-02-05-16-54-43.png

2、inline 资源

webpack.config.js 配置:

module.exports = {
// 配置资源文件 
    module: {
        rules: [{
            test: /\.svg/,
            type: 'asset/inline'
        }],
    }
}

执行启动服务命令:npx webpack serve --open,打开浏览器，可见， .svg 文件都将作为 data URI 注入到 bundle 中。

自定义 data URI 生成器 webpack 输出的 data URI，默认是呈现为使用 Base64 算法编码的文件内容。如果要使用自定义编码算法，则可以指定一个自定义函数来编码文件内容。安装自定义函数模块:

npm install mini-svg-data-uri -D

修改配置文件：

const svgToMiniDataURI = require('mini-svg-data-uri')
module.exports = {
    // 配置资源文件 
    module: {
        rules: [{
            test: /\.svg/,
            type: 'asset/inline',
            generator: {
            dataUrl: content => {
                content = content.toString();
                return svgToMiniDataURI(content);
                }
            }
        }]
    }
}

现在，所有 .svg 文件都将通过 mini-svg-data-uri 包进行编码。重新启动服务，在浏览器查看效果。

3、source 资源

source资源，导出资源的源代码。修改配置文件：

module: {
  rules: [
    test: /\.txt/,
        type: 'asset/source'
]}

在assets里创建一个 .txt,在入口文件里引入一个 .txt 文件,并获取文件内容，启动服务，打开浏览器，所有 .txt 文件将原样注入到 bundle中

4、通用资源类型

通用资源类型 asset , 在导出一个 data URI 和发送一个单独的文件之间自动选择。修改配置文件:

module:{
    rules:[
        test: /\.jpg/,
        type: 'asset',
    ]
}

现在webpack将按照默认条件，自动地在 resource 和 inline 之间进行选择: 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。可以通过在 webpack 配置的 module rule 层级中，设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件:

module.exports = {
    // 配置资源文件 
    module: {
        rules: [{
            test: /\.jpg/,
            type: 'asset',
            parser: {
                dataUrlCondition: {
                    maxSize: 4 * 1024 // 4kb
                }
            }
        }]
    }
}

在 assets 目录下创建 .jpg 文件，然后在入口文件中引入,执行编译命令:npx webpack,发现当前的 .jpg 文件被打包成了单独的文件，因为此文件大小超过了4kb。