为了解决css3中新增的样式可能还存在兼容性问题 这个时候就需要我们添加浏览器内核的前缀
- 安装插件npm i postcss-loader autoprefixer -D
- 在css中的css-loader后面添加一个postcss-loader,若在项目中使用less语言,在less下也需要添加postcss-loader
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
//在css中添加一个postcss-loader
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')(),
]
}
}
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')(),
]
}
},
'less-loader'
]
},
-
最后在package.json中添加browserslist 配置
{
"private": true,
"dependencies": {
"autoprefixer": "^6.5.4"
},
//添加 browserslist配置项
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
---别忘了配置 mode: 'production'
打包 npm run build