webpack（6）webpack处理图片

图片处理url-loader(webpack5之前的处理方式)

在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片

body{
    background: url("../img/test1.png");
}

但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 base64 URI 的 loader。

安装命令如下：

npm install url-loader --save-dev

url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。

接着我们在webpack.config.js中配置url-loader的设置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

此时，如果我们的图片test1.png的大小小于8192k，那么就可以打包成功，但是如果我们的图片大于8192k，此时就需要安装file-loader

安装命令如下：

npm install file-loader --save-dev

然后，在 webpack.config.js 配置中添加 loader。例如：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              publicPath: "dist/"
            }
          },
        ],
      },
    ],
  },
};

注意：配置时如果你同时配置了url-loader，一定要把url-loader的配置注释掉

此时如果我们进行打包，打包出来的图片名字是随机的哈希值字符串，例如1b959a13f661bd214696460400b8c8d0.png，如果我们想自定义名字，则需要进行配置option选项，具体参数可以参考官网

资源模块

webpack5之前我们处理静态资源比如。图片字体之类的资源的时候等，需要用到url-loader，file-loader，raw-loader，webpack5则放弃了这三个loader，这三个loader在github上也停止了更新。

webpack5使用四种新增的资源模块（Asset Modules）替代了这些loader的功能。

• asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
• asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
• asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
• asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。

案例

我们这里以assert/inline为例子，进行配置

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.png/,
        type: 'asset/inline'
      },
    ],
  },
}

此时，再进行打包，png格式的图片都会被作为 data URI 注入到 bundle 中。