前言：webpack 处理css是一个很基础的话题。只是在webpack4 里，用autoprefixer解决css 的浏览器的兼容性时，会有个和以前不一样的坑。所以就再详细的写一下这方面的知识。
一，所需依赖
注：postcss-loader的作用就像影视后期一样，把所有的原始文件合在一起，然后用插件加上特效，最后输出成品。autoprefixer 插件就对postcss-loader 解析出的AST 进行后期加工。
二，安装依赖
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
三，建立less 测试文件 style.less
#world{
display: flex;
}四，在主文件index.js 中导入style.less
import './style.less';
五，webpack配置文件 webpack.config.js
module: {
rules: [
{
test: /.less$/,
use: [
'style-loader',
{loader: 'css-loader', options: { importLoaders: 1 } },
'less-loader',
'postcss-loader'
]
},
]
}css-loader的 importLoaders: 1，是一个很重要的设置。这会让所有解析完成的css 只注入到一个style 标签里。若无此配置，每个新的css 文件在注入时，都会建立一个新的style 标签，有的浏览器里对style 标签是有数量限制的。
六，建立postcss 配置文件 postcss.config.js，在其中引入autoprefixer 插件
module.exports = {
plugins: [
require('autoprefixer')
]
}七，在package.json 中添加浏览器列表browserslist。这就是前言里说的坑，没有的话autoprefixer 就不起作用
{
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server --mode development"
},
"browserslist": [
"defaults",
"not ie < 11",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
}八，运行命令
.........................................................