css提取 (mini-css-extract-plugin)
1、安装
npm i mini-css-extract-plugin -D
// 或
npm i extract-text-webpack-plugin@next -D
2、webpack配置文件引入及配置:
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
// const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')
// css,scss,sass,less
{
test:/\.(sa|sc|c)ss$/,
use: [
process.env.NODE_ENV === 'development' ? 'style-loader': MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
//最后对应环境下的plugins中
new MiniCssExtractPlugin({
filename: "[name].css"
})
📢注意: MiniCssExtractPlugin 推荐只用于生产环境,因为该插件在开发环境下会导致HMR功能缺失,所以日常开发中,还是用style-loader。
公共部分提取: optimization
多入口文件的项目,难免在不同的入口存在相同的部分(使用了相同组建、公共样式等),将多个css chunk合并成一个css文件
optimization: {
splitchunks: {
cacheGroups: {
commons: {
name: 'commons' , // 提取出来的文件命名
// name: ‘common/common’ // 即先生成common文件夹
chunks: 'initial', // initial表示提取入口文件的公共css及
js部分
// chunks: 'all' // 提取所有文件的公共部分
// test: '/\.css$/' // 只提取公共css ,命名可改styles
minChunks:2, // 表示提取公共部分最少的文件数
minSize: 0 // 表示提取公共部分最小的大小
// 如果发现页面中未引用公共文件,加上enforce: true
}
}
}
}
css 压缩: optimize-css-assets-webpack-plugin
1、安装
npm i optimize-css-assets-webpack-plugin -D
2、引入及配置
// webpack.pord.config.js
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// 普通压缩
plugins: [
new OptimizeCSSAssetsPlugin ()
]
// 使用cssnano配置规则
// 先 npm i cssnano -D
plugins: [
new OptimizeCSSAssetsPlugin ({
// 默认是全部的CSS都压缩,该字段可以指定某些要处理的文件
assetNameRegExp: /\.(sa|sc|c)ss$/g,
// 指定一个优化css的处理器,默认cssnano
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: [ 'default', {
discardComments: { removeAll: true}, //对注释的处理
normalizeUnicode: false // 建议false,否则在使用unicode-range的时候会产生乱码
}]
},
canPrint: true // 是否打印编译过程中的日志
})
]
📢注意,这样配置会存在只有css压缩的问题,这时webpack4原本自己配置好的js压缩会无效 ,需要重新配置UglifyJsPlugin(用于压缩js,webpack4内置了)一下
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true, // Boolean/String,字符串即是缓存文件存放的路径
parallel: true, // 启用多线程并行运行提高编译速度
sourceMap: true
/*
uglifyOptions: {
output: {
comments: false // 删掉所有注释
},
compress: {
warning: false, // 插件在进行删除一些无用的代码时不提示警告
drop_console: true // 过滤console,即使写了console,线上也不显示
}
} */
}),
new OptimizeCSSAssetsPlugin({})
]
}
配置方式:
optimization的minimizer
plugins中配置
消除未使用的CSS
1、安装
npm i purify-webpack purify-css -D
2、引入及配置
const glob = require('glob')
const PurifyCssPlugin = require('purifycss-webpack')
plugins: [
new PurifyCssPlugin ({
paths: glob.sync(path.join(__dirname, '/*.html'))
})
]