Webpack4.0各个击破（二）—— 从头认识CSS 处理

在如今前端项目工程化的大趋势下，Webpack作为构建工具中的集大成者，俨然成为前端工程师不可或缺的武器之一，而Webpack4.0的正式发布更是让众多开发者期待已久。那么今天我们就来仔细看看Webpack4.0中CSS处理的新特性，对旧版本的使用方式进行对比，为我们日常工作中真正用到的一些需求提供一套更具扩展性、可维护性的解决方案。

一. CSS文件基本处理需求

在不使用构建工具的时代，开发者使用预编译语言来实现变量定义，选择器嵌套等一些刚需，再使用函数功能来实现一些更为复杂的需求，例如编写简单的@mixin px2rem( )函数来将开发中使用的px单位转换为rem单位，达到移动端自适应布局的目的。

而如今，随着Webpack的普及，我们完全可以使用Loader来完成类似的需求，而不用担心兼容性的问题，相较于传统的预编译语言，Webpack的Loader更简单易上手，而且扩展性更强。

二. 解决方案的升级

1. 基本处理

在Webpack4.0中，我们需要通过以下代码来完成CSS的基本处理：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

相比Webpack3.0，Webpack4.0对CSS的处理不再使用ExtractTextWebpackPlugin这个插件，而是直接通过style-loader和css-loader来完成，css-loader负责解析@import和url()，而style-loader则负责将解析后的CSS代码插入到head标签中。

2. PostCSS 处理

在Webpack4.0中，PostCSS的集成方式也有所改变，我们不再需要通过postcss-loader来完成，而是直接使用postcss-loader，具体代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

3. Sass/Scss 处理

Webpack4.0对Sass/Scss的处理方式与Webpack3.0基本一致，具体代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

4. Less 处理

Webpack4.0对Less的处理方式与Webpack3.0基本一致，具体代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
};

三. 扩展和优化

1. 全局变量定义

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              localIdentName: '[path][name]-[local]',
              modules: true
            }
          }
        ]
      }
    ]
  }
};

通过以上代码，我们可以将全局变量定义在单独的文件中，然后在主文件中通过@import引入，这样做的好处是，我们可以将全局变量的修改与主文件的修改解耦，使代码更加易于维护。

2. 使用Sass变量

Sass变量的使用与Less变量的使用基本一致，我们可以在Sass文件中定义变量，然后在主文件中通过@import引入，具体代码如下：

// _variables.scss
$primary-color: #007bff;
$secondary-color: #6c757d;

// main.scss
@import '_variables.scss';

body {
  background-color: $primary-color;
  color: $secondary-color;
}

3. 使用PostCSS插件

PostCSS插件可以帮助我们实现一些更复杂的CSS处理需求，例如自动添加前缀、美化CSS代码等，具体代码如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require('autoprefixer')({
                  browsers: ['last 2 versions', 'iOS >= 8', 'Android >= 4.1']
                }),
                require('cssnano')()
              ]
            }
          }
        ]
      }
    ]
  }
};

Webpack4.0中的CSS处理相较于Webpack3.0有了很大的提升，无论是性能还是功能都得到了全面的优化，希望大家能够通过本文对Webpack4.0中的CSS处理有更加深入的了解，并在实际项目中灵活运用。