webpack（三）加载处理其他资源（图片、图标）

js文件类型是能够被识别并直接打包的，而其他文件类型（如CSS和图片等）则需要通过特定的loader来进行加载打包。

一、图片打包 （file-loader）

图片打包关键要用到 file-loader 或url-loader，其中 url-loader 与 file-loader 功能基本一致，只不过 url-loader 能将小于某个大小的图片进行base64格式的转化处理。

（1）CSS中的图片

比如，我现在在src目录下新增一个images文件夹，再在images中添加一张图片“1.jpg”。然后我在style.css中添加以下代码：

html{ height: 100%; background: url("../images/1.jpg") no-repeat center;}

如果这时直接进行打包，那么肯定会报错，比如像这样的：

第三行它提示你需要使用一个loader来处理图片这种类型的文件，这时，我们只需把file-loader装上，并在webpack.config.js中添加相应配置就ok了。

① 安装file-loader

npm i -D file-loader

② 在webpack.config.js中的rules数组中添加file-loader的相关配置

{
    test: /\.(png|jpg|gif|svg)$/,
    use: ['file-loader']
}

虽然我们已经将图片但是打包后，我们会发现打包后的图片名发生了变化：

那么如何才能保持图片名不变，而且也能够添加到指定目录下呢？

③ 设置文件名称

我们只需要再添加一个options属性即可：

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: 'images/[name].[ext]'
    }
}

其中name属性其实就是图片打包后的路径，其中包括图片名（[name]）和图片格式（[ext]）。
此时打包后的dist目录结构如下：

文件名称规则

此时打包后的dist目录结构如下：
webpack 为我们提供看大量的placeholders来显示不同的内容：

我们可以在文档中查阅自己需要的placeholder：https://v4.webpack.js.org/loaders/file-loader/#placeholders

介绍几个常用的placehoder：

• [ext]: 处理文件扩展名；

• [name]： 处理文件名称；

• [hash]： 文件内容，使用MD4的散列函数处理，生成的一个128的hash值（32十六进制）；

• [contentHash]: 在file-loader中的和[hash]结果是一致的（在webpack的一些其他地方不一样）；

• [hash:<length>]: 截取hash长度，默认32个字符太长了；

• [path]： 文件相对于webpack 配置文件的路径；

（2）JS中的图片

file-loader能自动识别CSS代码中的图片路径并将其打包至指定目录，但是JS就不同了，我们来看下面的例子。

// index.js
var img = new Image();
img.src = '../images/1.jpg';
document.body.appendChild(img);

如果不使用Webpack打包，正常情况下只要路径正确图片是能够正常显示的。然而，当使用Webpack打包后，我们会发现图片并未被成功打包到dist目录，自然图片也无法显示出来。

因为Webpack并不知道’…/images/1.jpg’是一张图片，如果要正常打包的话需要先将图片资源加载进来，然后再将其作为图片路径添加至图片对象。具体代码如下：

// index.js
import imgSrc from '../images/1.jpg'

var img = new Image();
img.src = imgSrc;
document.body.appendChild(img);

注意：
如果浏览器图片未展示，需要在webpack.config.js 的css-loader 添加 esModule 为false的配置

{
  module: {
    rules: [
      // ... 其它规则省略
      {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1,
                            esModule: false
                        }
                    },
                    'postcss-loader']
            },
    ]
  }
}

二、 url-loader

除了使用file-loader对图片进行打包处理外，我们同样也可以使用url-loader代替，另外我们还可以对小于某个大小的图片进行base64格式的转化处理。

安装 url-loader

npm install url-loader -D

webpack.config.js 规则配置

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        name: './images/[name].[ext]',
        limit: 8192
    }
}

这里limit属性的作用就是将小于8192B（8.192K）大小的图片转成base64格式，而大于这个大小的图片将会以file-loader的方式进行打包处理，例如：

当然，如果不写limit属性，那么url-loader就会默认将所有图片转成base64。

三、asset module type

url-loader的limit效果

加载字体文件

字体的打包

webpack.config.js 配置

const path = require('path');

module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    // 必须是一个绝对路径
    path: path.resolve(__dirname, "./build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]"
  },
  module: {
    rules: [
      {
        // 规则使用正则表达式
        test: /\.css$/, // 匹配资源
        use: [
          // { loader: "css-loader" },
          // 注意: 编写顺序(从下往上, 从右往做, 从后往前)
          "style-loader", 
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ],
        // loader: "css-loader"
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        // type: "asset/resource", file-loader的效果
        // type: "asset/inline", url-loader的效果
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]"
        },
        // 是parser，不是parse
        parser: {
          dataUrlCondition: {
            // 是maxSize，不再是limit
            maxSize: 100 * 1024
          }
        }
      },
      {
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]"
        }
      }
    ]
  }
}

index.html

注意，index.html中要使用字体图标，html代码要写在打包后的资源文件后面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./build/bundle.js"></script>
  <!-- 注意，index.html中要使用字体图标，html代码要写在打包后的资源文件后面 -->
  <div class="iconfont icon-caps-lock"></div>
  <div class="iconfont icon-ashbin"></div>
  <div class="iconfont icon-caps-lock"></div>
</body>
</html>