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 }}
        ]
      },
    ]
  }
};