打包的css文件,会在打包出来的js文件里面。现在使用mini-css-extract-plugin这个插件可以单独把css文件分离出来
提取css步骤
1、安装插件
cnpm i mini-css-extract-plugin -S
2、rules配置
{
test : /\.css$/,
use : ['style-loader',
{
loader:MiniCssExtractPlugin.loader,
options:{
publicPath: '../'
}
},'css-loader']
}
3、插件配置,告诉webpack要提取的css文件路径
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename : './css/index.css'
})
压缩css
提取出来的css文件并没有压缩,可以使用optimize-css-assets-webpack-plugin这个插件进行压缩
1、安装
cnpm i optimize-css-assets-webpack-plugin -S
2、插件配置
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp : /\.css$/g, //匹配要优化或者要压缩的资源名
cssProcessor : require('cssnano'), //压缩和优化css处理器,默认写cssnano即可
cssProcessorPluginOptions : {
preset : ['default', {
discardComments : { //去除注释
removeAll: true
}
}]
},
canPrint :true
})