PostCSS 是 CSS 的後處理器，它使用 JavaScript 來對 CSS 做後製處理，達成擴展 CSS 的功能。

要使用 PostCSS 的 Autoprefixer 外掛，幫 CSS 加上瀏覽器引擎前綴，提高對瀏覽器的相容性支援

安裝

  • postcss-loader

  • autoprefixer PostCSS 的外掛，幫 CSS 自動補全瀏覽器引擎前綴

    npm install postcss-loader autoprefixer --save-dev

修改 Webpack 配置檔

檢查一下 Webpack 的處理流程

  1. sass-loader 編譯完變成 css 文件
  2. postcss-loader 幫 css 文件加上前綴
  3. css-loader 讀取 css 文件
  4. MiniCssExtractPlugin.loader 抽離 css 文件

因此要將 postcss-loader 放置在 sass-loader 的後面

// Node.js 內建用來處理路徑的模組
const path = require('path');

// 抽離 CSS 檔案的套件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// 壓縮 CSS 的套件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

// 壓縮 JS 的套件
const TerserJSPlugin = require('terser-webpack-plugin');

module.exports = {

  // Webpack 的進入點
  entry: './src/index.js',
  
  // Webpack 輸出點
  output: {

    // 輸出的檔案名稱
    filename: 'main.js',
    
    // 輸出的檔案位置
    path: path.resolve(__dirname, './dist/'),
  },

  // 在生產模式會壓縮 CSS 與 JS 檔案
  optimization: {
    minimizer: [new TerserJSPlugin(), new OptimizeCSSAssetsPlugin()],
  },
  
  // 設定 CSS 的輸出方式
  // 使用[name]變數，代表使用 entry 文件的檔名來命名檔案
  plugins: [
    new MiniCssExtractPlugin({
      filename: './css/[name].bundle.css',
    }),
  ],
  module: {
    rules: [

      // Babel
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      
      // CSS
      // style-loader 會將 CSS 注入 HTML 
      // MiniCssExtractPlugin.loader 會將 CSS 抽離成獨立檔案
      {
        test: /\.(sa|sc|c)ss$/,
        //use: ['style-loader', 'css-loader'],
        use: [MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [
                require('autoprefixer')({
                  'browsers': ['> 1%', 'last 2 versions']
                }),
              ]
            }
          },
          'sass-loader'],
      },
    ],
  },
};

參考資料