webpack打包css自動添加css3前綴

為了瀏覽器的兼容性，有時候我們必須加入-webkit,-ms,-o,-moz這些前綴。目的就是讓我們寫的頁面在每個瀏覽器中都可以順利運行。

1.安裝

cnpm i postcss-loader autoprefixer --save-dev

2.在當前webpack.base.conf.js目錄新建一個postcss.config.js文件

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

　　這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增加相應的css3屬性前綴。

3.配置

方法1：此方法需要新建postcss.config.js文件

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

 

方法二：此方法不需要postcss.config.js文件

 

module.exports = {
  module: {
    rules: [
      {
        test: /\.(c|le)ss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: [
                require("autoprefixer") /*在這里添加*/
              ]
            }
          },
          {
            loader: 'less-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ],
  }
}

 

4.輸入webpack進行打包，最終效果：