asset module type 替代 loader 处理图片字体等文件资源

前面文章中体验了webpack的打包、解析css资源，接下来看看项目中常用到的图片、字体、文件该怎么处理吧~

项目路径如下，在上一篇解析css资源项目基础上增加了一些文件

demo
├─ src
│   ├─ css
│   │   ├─ index.css
│   │   └─ file.css    （+）
│   ├─ img
│   │  ├─ portrait.png （+）
│   │  └─ sky.jpg         （+）
│   ├─ js
│   │  ├─ component.js
│   │  └─ createElement.js  （+）
│   └─ index.js
├─  index.html
├─  package.json
└─  webpack.config.js

在 createElement.js 分别创建一个 div 元素设置背景图片、img 选择引入图片链接。

// createElement.js
const imageEl = new Image();
const portrait = require("../img/portrait.png");
imageEl.src = portrait;
document.body.appendChild(imageEl);

const divEl = document.createElement("div");
divEl.style.width = "200px";
divEl.style.height = "200px";
divEl.className = "div-el";
document.body.appendChild(divEl);

// file.css
.div-el {
  background: url("../img/sky.jpg") top center/100% no-repeat;
  display: inline-block;
}

// index.css
@import './file.css';

no loaders

直接通过 npm run build 是无法通过编译的，会提示没有合适的 loader 处理图片资源

file-loader

file-loader 就是一个可以用来处理图片字体等文件资源的 loader，它的处理方式是将资源复制到打包后的文件夹，并重命名。

通过 npm i file-loader -D 安装依赖，在 webpack.config.js 中配置

因为 file-loader 在webpack5 环境下已经弃用，要想正确处理图片，需要配置两个属性。

esModule: false （启用 CommonJS 模块语法）
type: "javascript/auto" （停止当前 asset 模块的处理，并再次启动处理时，防止导致 asset 重复）

module.exports = {
  // 其它配置省略
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              // 定义复制后的文件名，取原文件名+哈希值6位+原文件后缀
              name: "img/[name]_[hash:6].[ext]",
              esModule: false,
            },
          },
        ],
        type: "javascript/auto",
      },
    ],
  },
};

复制后的资源在 dist/img 文件夹下

在 html 页面引入打包后的 js 文件，通过 live server 可以看到图片显示在页面上

url-loader

url-loader 是另一个可以处理图片字体等文件资源的 loader，它与 file-loader 有些不同

file-loader 会复制所有的资源
url-loader 只会复制占用空间较大的资源，当资源较小时，会对它进行 base64 编码

通过 npm i url-loader -D 安装依赖，在 webpack.config.js 中配置

url-loader 和 file-loader 一样，在webpack5环境下已经弃用，也需要配置 esModule: false、type: "javascript/auto" 属性

module.exports = {
   // 其它配置省略
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name]_[hash:6].[ext]",
              // 自定义转成 base64 资源大小，超过 limit 将直接复制资源
              limit: 100 * 1024,
              esModule: false,
            },
          },
        ],
        type: "javascript/auto",
      },
    ],
  },
};

sky.jpg 大小为576kb，portrait.png 为33.2kb，所以 portrait.png 是以 base64 编码的形式展现，sky.jpg 被复制到了打包后的文件夹 img 中