摘要：
自动添加浏览器前缀，我们这里使用postcss-loader首先cnpminstall--save-devpostcss-loaderautoprefixer我这里用的cnpm，npm也可以下载接下来是配置在网上查了相关文档发现需要新建一个postcss.config.js文件来对postcss-loader配置。第一种配置：新建与webpack.config.js同级的postcss.config.js文件module.exports={plugins:[require]}然后打包出的css文件就自动添加前缀了bodydiv{display:flex;-webkit-transform:all1s;/*这里添加了-webkit-*/transform:all1s;}然而我发现现在把配置移到options里，也可以产生同样的效果。第二种配置在webpack.config.js的module.rules的postcss-loaderoptions里添加。
自动添加浏览器前缀 ，我们这里使用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- 前缀，其他几种前缀目前还没有发现。