Webpack——打包CSS / Less / Sass资源相关配置

站长

2023年09月26日 17:49 · 阅读数 17

Webpack默认只能理解JS和JSON文件，其他类型的资源打包，需要安装相应的插件或loader。

如果你不清楚 Webpack 关于 CSS 、Less 或者 Sass 的配置，希望这篇文章可以为你带来答案。

一、打包样式资源

打包 CSS 资源

打包CSS文件，需要安装两个loader：

css-loader：处理CSS的模块化（如import）和使用url引入的外部资源。
style-loader：把css-loader解析后的样式内联插入到HTML的head中。

下载这两个loader：

  npm install css-loader style-loader -D

下载完成后，需要在webpack的配置文件中进行配置（这里用默认的webpack.config.js）。但是配置前，你需要知道一个新的概念：

loader——webpack开箱自带只能理解JS和JSON文件，loader让webpack能够去处理其他类型的文件，并将它们转换为有效模块，并添加到依赖树中。
rules——定义一系列规则，这些规则通过定义的匹配文件后缀，修改这些模块的创建方式，对module使用loader或者修改解析器parser。

  module.exports = {
    // ...
    rules: [
      // ...
      {
        // 用正则匹配文件名后缀为.css的文件
        test: /.css$/,
        // 告诉编译引擎使用这两个loader进行编译
        use: ['style-loader', 'css-loader']
      }
    ],
    // ...
  }

上面配置rules中的意思是，告诉webpack当匹配到文件名后缀为.css的文件时，先使用css-loader然后再使用style-loader编译。

注意：loader的配置是有顺序要求的，它的执行顺序是从右到左的。比如use: ['style-loader', 'css-loader']，它先用css-loader处理CSS的模块化，然后style-loader把css-loader解析后的样式代码内联插入到HTML中的style标签内。如果你的顺序写错了，编译是会报错的。

rules中也可以使用loader配置项，它的作用和use是一样的，但是它们有个区别： loader只支持字符串类型值，use只支持数组类型值。

比如上面的use配置项用loader配置项写，那么应该是这样：

 {
   test: /.css$/,
   loader: 'style-loader!css-loader'
 }

如果使用单个 loader，那么应该是这样：

 {
   test: /.css$/,
   loader: 'css-loader'
 }

不过一般建议多个 loader 使用use配置项，单个 loader 使用loader配置项比较直观。

打包 Less / Sass 资源

Less 和 Sass 都属于 CSS 扩展语言，除了需要安装编译 CSS 语言相关的loader外，还需要安装它们各自的语言包和loader。

编译 Less 需要安装 less 语言包和 less-loader：

 npm install less less-loader -D

编译 Sass 需要安装node-sass语言包和sass-loader：

 npm install node-sass sass-loader

less-loader和sass-loader的作用就是将 Less 或 Sass 转成 CSS。

看一下它们各自的webpack配置：

 // ...
 module.exports = {
   // ...
   rules: [
     // Less 配置
     {
       test: /.less$/,
       use: ['style-loader', 'css-loader', 'less-loader']
     },
     // Sass 配置
     {
       test: /.scss$/,
       use: ['style-loader', 'css-loader', 'sass-loader']
     }
   ]
 }

二、提取 CSS 文件为单独的文件

前面说到，style-loader的作用是将处理好后的CSS样式代码放到HTML的style标签中。那么，如果我需要将处理后的CSS文件单独编译成一个.css文件，引入到HTML中，webpack需要怎么做呢？

我们可以使用mini-css-extract-plugin插件提取css代码为单独的CSS文件，在HTML中通过link标签引入CSS文件。

 npm install mini-css-extract-plugin -D

然后在webpack配置文件中配置：

 // ...
 // 1.引入插件
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   // ...
   rules: [
     {
       test: /.css$,
       // 3.配置loader
       use: [MiniCssExtractPlugin.loader, 'css-loader']
     }
   ],
   plugins: [
     // 2. 在plugins中使用
     new MiniCssExtractPlugin()
   ]
 }

默认生成的文件名是main.css，我们也可以自定义它的文件名：

 module.exports = {
   // ...
   plugins: [
     // ...
     new MiniCssExtract({
       filename: 'index.css' // 自定义生成的css文件名
     })
   ]
 }

关于这个插件的其他配置项，可以点击上查看配置信息。

那么从Less和Sass中提取CSS文件也是类似的配置：

 // ...
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 module.exports = {
   // ...
   rules: [
     { // Less 配置
       test: /.less$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
     },
     { // Sass 配置
       test: /.scss$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
     }
   ],
   plugins: [
     new MiniCssExtractPlugin()
   ]
 }

三、处理CSS兼容性

对于CSS兼容性的处理，使用postcss处理，需要下载2个依赖包：postcss-loader 和 autoprefixer。

postcss 会找到 package.json 中的 browserslist 项的配置，这个配置告诉编译器，需要兼容的浏览器类型。而 autoprefixer 会给需要兼容的样式自动添加前缀。

// ...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
    ],
  },
};

然后在 package.json 文件中配置要兼容的浏览器：

{
  // ...
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "last 3 iOS versions"
  ]
}