Webpack 4
目前版本已经到了4.27
相较于前面的版本还是有一些改动的,具体可以参考升级指南 迁移到新版本
这里只介绍css
的 打包、压缩、分离、去重 的方法;
不懂的或者有更优的方案,欢迎评论交流
插件 | 描述 | 备注 |
---|---|---|
mini-css-extract-plugin | 主要用于提取css | 需要安装 |
optimize-css-assets-webpack-plugin | 主要用于压缩、去重 | 需要安装 |
style-loader | – | 需要安装 |
css-loader | – | 需要安装 |
autoprefixer | 添加前缀,兼容不同浏览器 | 需要安装 |
postcss-import | 处理css 的@import 只支持本地的 import 处理,不支持http 等远程的URL链接的处理 |
需要安装 |
cssnano | css优化处理器 官网 | 需要安装 |
为了开发效率,一般都直接inline即可;即:使用style-loader直接使用style标签引入,不需要涉及到压缩,打包等操作,因为这些操作是比较耗时的操作,开发就没必要了
配置如下,
module:{
rules:[
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
]
}
]
}
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
require('postcss-import')(),
require('autoprefixer')({
browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
})
]
}
}
]
}
]
}
主要是针对多入口,会产生多分样式文件,合并成一个样式文件,减少加载次数
配置如下
optimization:{
splitChunks: {
chunks: 'all',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true,
cacheGroups: {
styles: {
name: 'style',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
}
filename
与output
中的filename
命名方式一样- 这里是将多个
css
合并成单一css
文件, 所以chunkFilename
不用处理- 最后产生的样式文件名大概张这样
style.550f4.css
; style 是splitChunks
->cacheGroups
->name
new MiniCssExtractPlugin({
filename: 'assets/css/[name].[hash:5].css',
// chunkFilename: "assets/css/[name].[hash:5].css",
}),
- 主要使用
optimize-css-assets-webpack-plugin
插件和cssnano
优化器cssnano
优化器具体做了哪些优化 可参考 官网cssnano
优化器也可以在loader
中配置,除了不能去重
之外,其他效果等同,所以小编这里就只在plugin
中配置了,免得在配置一遍
有两种配置方式,效果等同
optimization:{
minimizer: [
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
// cssProcessorOptions: cssnanoOptions,
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false
}]
},
canPrint: true
})
]
}
配置说明:
cssProcessor
处理器:默认就是cssnano
cssProcessorOptions
和cssProcessorPluginOptions
都是指定cssProcessor
所需的参数,经本人实验cssProcessorOptions
没起作用,所以只需要指定cssProcessorPluginOptions
即可canPrint
: 是否打印处理过程中的日志
cssnano
配置说明
discardComments
: 对注释的处理normalizeUnicode
: 建议设置为false
,否则在使用unicode-range
的时候会产生乱码 详情参考 normalizeUnicode
就是直接在webpack
的plugins
中配置即可
plugins:[
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'),
// cssProcessorOptions: cssnanoOptions,
cssProcessorPluginOptions: {
preset: ['default', {
discardComments: {
removeAll: true,
},
normalizeUnicode: false
}]
},
canPrint: true
})
]
欢迎评论交流