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- 前缀，其他几种前缀目前还没有发现。