Vue 项目之 css-loader 版本问题补充

codersjj
1,319 阅读3分钟

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

前面我们在讲打包图片文件时，有提到重新安装较低版本（6.x.x 版本以下的）的 css-loader，这是为什么呢？难道是最新版本的 css-loader 有什么问题吗？当然不是，恰恰是最新版本的（更准确的说法是 v6.0.0 版本开始）css-loader 变得更好了。下面我们就来测试看下这么说的原因。

我们先卸载之前的 5.2.7 版本的 css-loader：

npm uninstall css-loader

再来安装最新版本的 css-loader：

npm install -D css-loader

然后，我们先删除项目目录下的 ./build 文件夹（如果之前打过包的话），再来执行 npm run build 命令打包，可以发现打包正常，打包出来的内容也和之前的没有区别：

image-20211113165450890

浏览器页面中也能正常显示对应的内容。

下面，我们打开 webpack.config.js 文件，修改里面处理图片文件的规则对象的 test：

...

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        // test: /\.(jpe?g|png|gif|svg)$/,
        test: /\.(png|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024
          }
        },
        generator: {
          filename: 'img/[name]_[hash:6][ext]'
        }
      },
      ...
    ]
  }
}

我们去掉了之前对 .jpg/.jpeg 图片的匹配，因为我们在 ./src/css/image.css 文件中通过 url() 的方式引入了一张 .jpg 图片。如果我们这边还是用的 5.2.7 版本的 css-loader，前面在讲打包图片资源时我们就已经看到了打包会报错。那么这次我们用了最新版本（当前是 6.5.1 版本）的 css-loader 之后呢？我们来打包看下结果：

image-20211113174534328

你会发现，除了一个警告（暂且不管它），并没有报错，打包成功了。同时，你可以看到打包出来的文件夹下相较于之前多出了一个 .jpg 图片，如果你打开这张图片，就会发现它其实就是我们在 ./src/css/image.css 文件中通过 url() 的方式引入了的那张 .jpg 图片。当然，如果你打开浏览器，页面上也是能正常呈现对应效果的。

也就是说，从效果上来看，当前最新版本的 css-loader 已经默认支持对 css 文件中（通过 url() 方式引入）的图片进行解析了。事实上，从 6.0.0 版本开始，css-loader 就加入了新特性，我们可以从它的 GitHub 仓库中找到有关版本发布的说明：

image-20211113180053105

红框内的内容翻译过来的意思就是：file-loader 和 url-loader 已经被弃用了，请使用资源模块（asset modules），从 v6 版本开始，css-loader 就开始通过默认内置的资源模块（也就是为所有通过 url() 方式引入的资源使用 type: 'asset' 的资源模块），生成 new URL(...) 语法了。

因此，从 v6.0.0 版本开始，css-loader 会通过使用 'asset' 类型的 Asset Modules 解析 css 文件中使用 url() 方式引入的模块，所以如果我们的项目中仅需要对 css 文件（里面存在 url() 方式引入图片文件）进行打包，其实是可以不用配置处理图片文件的 Rule 对象的。但是，由于项目中一般会有 js 文件，并且 js 文件中可能会通过 import 等方式导入图片文件，我们还是需要配置处理图片文件的 Rule 对象的。

avatar
文章
阅读
粉丝