【Webpack4】CSS 配置之 postcss-loader

postcss-loader 应该是 Webpack 配置中不可或缺的一个 CSS loader。它负责进一步处理 CSS 文件，比如添加浏览器前缀，压缩 CSS 等。

配置 postcss-loader 时，可以在 webpack.config.js 中配置具体选项，也可以新建一个 postcss.config.js，专门定义 postcss-loader 的配置。

这篇文档基于依赖包版本：

• webpack：4.39.1

  npm i -D webpack

• postcss-loader：3.0.0

  npm i -D postcss-loader

• cssnano：4.1.10

  npm i -D cssnao

• autoprefixer：9.7.2

  npm i -D autoprefixer

添加浏览器前缀

1. 配置 Autoprefixer 之前，需要先添加 Browserslist ：在项目根目录添加 .browserslistrc 文件；或者在package.json文件中添加 browserslist ，比如：

   {
      "browserslist": [
         "defaults"
       ]
   }
   

2. 配置 Autoprefixer：

• 如果是在项目根目录中创建了 postcss.config.js：

  module.exports = {
    plugins: [
         require('autoprefixer')
      ]
  }
  

• 如果直接在 webpack.config.js 中配置：

  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('autoprefixer')
          ]
        }
      }
    ]
  }
  
  

生产模式中压缩CSS

推荐使用文件 postcss.config.js的方式:

module.exports = ({ env }) => ({
  plugins: [
       require('autoprefixer'),
       env === 'production' ? require('cssnano') : null
    ]
})

env取值process.env.NODE_ENV，可用来判断是开发模式还是生产模式。

当然也可以在 webpack.config.js 中，只是写起来有点冗余，尤其是需要在多个规则中用到 postcss-loader 时：

const devMode = process.env.NODE_ENV === 'development'; // 是否是开发模式

module.exports = {
  module: {
    rules:[
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins:devMode?[require('autoprefixer')]
                :[require('autoprefixer'), require('cssnano')]
            }
          }
        ],
      }
    ]
  }
};

压缩 CSS 其他方法可以参考 Webpack 文档中这一段 。

开发模式下生成 Sourcemap

用 style-loader时：

const devMode = process.env.NODE_ENV === 'development'; // 是否是开发模式

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

用 MiniCssExtractPlugin 时，注意 sourcemap 得配置成“inline”，不然调试时仍旧无法定位到.less 源码，只能定位到编译后的 CSS 文件。

const devMode = process.env.NODE_ENV === 'development'; // 是否是开发模式

module.exports = {
  module: {
    rules:[
      {
        test: /\.less$/i,
        use:  [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // only enable hot in development
              hmr: devMode,
              // if hmr does not work, this is a forceful method.
              reloadAll: true,
            },
          },
          { loader: 'css-loader', options: { sourceMap: devMode}},
          { loader: 'postcss-loader', options: { sourceMap: devMode?'inline':false}}, // 注意这里是 inline
          { loader: 'less-loader', options: { sourceMap: devMode }}
        ]
      },
    ]
  }
};