抽离css文件
// 安装本地插件
cnpm i mini-css-extract-plugin -D
// 引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 使用
plugins: [
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
]
// 注意，该插件不能和style-loader使用，
// 因为style-loader是用来将css以style的方式插入的
{
test: /.css$/,
use: [
// 需要将loader中css/less等文件里面的style-loader，
// 替换成该插件
MiniCssExtractPlugin.loader,
'css-loader'
]
},
压缩css文件
// 安装压缩css插件
cnpm i optimize-css-assets-webpack-plugin -D
// 同时需要配合cssnano插件使用
cnpm i cssnano -D
// 使用
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
plugins: [
new OptimizeCssAssetsWebpackPlugin({
assetsNameReg: /\.css$/g,
cssProcessor: require('cssnano')
})
]
自动增加css兼容
// 首先安装postcss-loader和autoprefixer
cnpm i postcss-loader autoprefixer -D
// 对样式处理文件增加autoprefixer配置
// 处理css私有前缀和兼容
// 例如，增加如下配置
{
test: /.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
// 增加autoprefixer处理
{
loader: 'postcss-loader',
options: {
plugins: () => [
require('autoprefixer')({
// 通过browsers选项指定兼容的版本
// 推荐在webpack中配置在package.json中
browsers: [
'last 2 version',
'>1%',
'ios 7'
]
})
]
}
}
]
}
