webpack中使用资源模块 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第8天

目前为止，我们的项目可以在控制台上显示 "Hello world"。现在我们尝试混合一些其他资源，比如 images，看看 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 和发送一个单独的文件之间自动选择

 resource 资源

import imgSrc from "./assets/img-1.png"
// 引入img格式的
const img = document.createElement('img');
img.src = imgSrc;
document.body.appendChild(img);

inline资源

• 具体操作类上

/**
* 在配置文件中：
*/
const svgToMiniDataURI = require('mini-svg-data-uri');
module.exports = {
  // ...
  // 配置资源文件
  module: {
    rules: [
      {
        test: /\.svg/,
        type: 'asset/inline',
      },
    ]
  },
}

/***
* 在index.js文件中：
*/
    import logoSvg from "./assets/webpack-logo.svg"
    // 引入svg格式的
    const img2 = document.createElement('img');
    img2.src = logoSvg;
    document.body.appendChild(img2);
    document.body.appendChild(img2);
    document.body.appendChild(img2);

• 可见， .svg 文件都将作为 data URI 注入到 bundle 中
• 自定义 data URI 生成器
  • webpack 输出的 data URI，默认是呈现为使用 Base64 算法编码的文件内容。如果要使用自定义编码算法，则可指定一个自定义函数来编码文件内容。
  • 安装自定义函数模块：
  • • 控制台执行：npm install mini-svg-data-uri -D
    • 修改配置文件

• 现在，所有 .svg 文件都将通过 mini-svg-data-uri 包进行编码。

source资源

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

  // 配置资源文件
  module: {
    rules: [
      {
        test: /\.txt/,
        type: "asset/source",
      },
   }

• 引入资源

    import egtext from "./assets/example.txt"
    const block = document.createElement('div');
    block.textContent = egtext;
    document.body.appendChild(block);

• 通用资源类型

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

    import jpg from "./assets/qianfeng-sem.jpg"
    const img3 = document.createElement('img');
    img3.src = jpg;
    document.body.appendChild(img3);

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