webpack4 css添加瀏覽器前綴 postcss-loader

自動添加瀏覽器前綴 ，咱們這裏使用postcss-loader

首先  cnpm install --save-dev postcss-loader autoprefixer 

我這裏用的cnpm ，npm也能夠下載

接下來是配置

在網上查了相關文檔發現須要新建一個 postcss.config.js 文件來對 postcss-loader 配置。

 

 

第一種配置： 新建與 webpack.config.js 同級的 postcss.config.js 文件

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

 

而後打包出的css文件就自動 添加前綴了 

 

body div {
  display: flex;
  -webkit-transform: all 1s;/*這裏添加了 -webkit-*/
  transform: all 1s;
}

 

然而我發現 如今把 配置移到options裏，也能夠 產生一樣的效果。

 

第二種配置 在 webpack.config.js 的 module.rules  的  postcss-loader options 裏添加。

{
            test: /\.(le|c)ss$/,
            include: [
                path.resolve(__dirname, "app")
            ],
            exclude: [
                path.resolve(__dirname, "node_modules")
            ],
            use: [
                { loader: MiniCssExtractPlugin.loader },
                /**
                 * style-loader 主要 將css 插入到head 的style 標籤中內聯
                 */
                // {loader:"style-loader"},


                /**
                 * 
                 */
                { loader: "css-loader" },

                { loader: "less-loader" },

                {
                    loader: "postcss-loader",
                    options: {
                        plugins: [
                            require("autoprefixer") /*在這裏添加*/
                        ]
                    }
                }
            ]

        }

一樣能夠自動添加 瀏覽器前綴。

 

這兩種方法比較來講，確定是第二種比較好，能夠省去建立一個文件的麻煩，直接在同一個文件中配置就行了。

不過這個loader 我發現只能添加 -webkit- 前綴，其餘幾種前綴目前尚未發現。