Webpack加载和处理其他资源

1.file-loader使用

处理jpg、png等格式的图片 : file-loader

file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；

安装file-loader:

npm install file-loader -D

配置图片的Rule:

{
    test: /\.(png|jpe?g|gif|svg)$/,
    use: {
        loader: "file-loader"
  }
}

文件的名称规则

有时候我们处理后的文件名称按照一定的规则进行显示，比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；

可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：

最常用的placeholder：

• [ext]： 处理文件的扩展名；
• [name]：处理文件的名称；
• [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
• [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样）；
• [hash:<length>]：截图hash的长度，默认32个字符太长了；
• [path]：文件相对于webpack配置文件的路径；

2. url-loader使用

 url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

安装url-loader：

npm install url-loader -D

url-loader的limit

• 开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可；
• 因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
• 大的图片也进行转换，反而会影响页面的请求速度；

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "img/[name].[hash:6].[ext]",
              limit: 100 * 1024,
            },
          },
        ],
      }

3. asset module type的介绍

• 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；

• 在webpack5之后，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

• asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
• asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
• asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；

• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；

Asset module type的使用

加载图片，我们可以使用下面的方式：

1. 修改output，添加assetModuleFilename属性

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource", // file-loader的效果
}




output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    // 设置asset/resource打包的配置项
    assetModuleFilename: "img/[name].[hash:6][ext]"
  }

1. 方式二：在Rule中，添加一个generator属性，并且设置filename

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource", // file-loader的效果
        generator: {
          filename: "img/[name].[hash:6][ext]",
        }
}

url-loader的limit效果

• 将type修改为asset；
• 添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

{
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        generator: {
          filename: "img/[name].[hash:6][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024,
          },
        },
 }

加载字体文件

如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的。

{
        test: /\.ttf|eot|woff2?$/i,
        type: "asset/resource",
        generator: {
          filename: "font/[name].[hash:6][ext]",
        },
      }