代码的压缩可以分为三个部分,HTML
CSS
JS
。我们挨个来看。
1. HTML
压缩
需要用的插件是html-webpack-plugin
文档
其实呢,这个插件主要是用来生成html
文件,将 webpack中entry
配置的相关入口chunk
和 extract-text-webpack-plugin
抽取的css样式插入到该插件提供的template
或者templateContent
配置项指定的内容基础上生成一个html文件,具体插入方式是将样式link
插入到head
元素中,script
插入到head
或者body
中。
参数比较多,但我们这节是为了压缩,所以我们只要关注minify
这个参数。minify
参数真正传入的是html-minifier
的配置,配置参数列表详见文档
目录:
.
├── dist
├── package-lock.json
├── package.json
├── src
│ ├── index.html
└── webpack.config.js
复制代码
webpack.config.js
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/index.html'),
filename: 'index.html',
chunks: ['index'],
inject: true,
minify: {
html5: true, // 根据HTML5规范解析输入
collapseWhitespace: true, // 折叠空白区域
preserveLineBreaks: false, // 当标记之间的空格包含换行符时,始终折叠为1换行符(不完全删除它)。必须与collapseWhitespace=true一起使用
minifyCSS: true, // 压缩文内css
minifyJS: true, // 压缩文内js
removeComments: false // 移除注释
}
})
复制代码
新建src/index.html
文件,随便插入点内容,build
之后看一下
├── dist
│ ├── index.html
复制代码
2. CSS
压缩
这里需要用到optimize-css-assets-webpack-plugin
插件文档
插件总共有五个参数:
assetNameRegExp
,用来匹配文件名称的正则表达式,默认写/\.css$/g
cssProcessor
,用来优化/压缩CSS的处理器,默认是cssnano
,使用的话记得先安装cssProcessorOptions
,传给处理器的参数,默认{}
cssProcessorPluginOptions
,传给处理器的插件参数,默认{}
canPrint
,指示插件是否可以将消息打印到控制台,布尔值,默认为true
直接上手试一下
项目目录
.
├── dist
├── package-lock.json
├── package.json
├── src
│ ├── index.css
│ └── index.js
└── webpack.config.js
复制代码
webpack.config.js
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano'), // 引入cssnano配置压缩选项
})
复制代码
index.js
import './index.css'
复制代码
然后直接build
我们可以在dist
目录看到打包后的文件
├── dist
│ ├── main_14db90b8.js
│ └── main_5d49fe37.css
复制代码
main_5d49fe37.css
:
可以看到已经是压缩过的css了。so easy~
注意:
webpack v3
以下(含3.0)的版本,请使用optimize-css-assets-webpack-plugin@3.2.0
,optimize-css-assets-webpack-plugin@4.0.0
版本及以上仅支持webpack v4
3. JS
压缩
因为webpack v4
内置了uglifyjs-webpack-plugin
,所以我们默认打包就会压缩js文件。但是如果你想有特殊的配置,也可以手动下载uglifyjs-webpack-plugin
,配置参数文档
参数列表:
test
,测试匹配文件include
,压缩包含文件exclude
,压缩排除文件chunkFilter
,过滤可以压缩的块cache
,是否启用文件缓存cacheKeys
,覆盖默认缓存键parallel
,并行压缩配置sourceMap
,源码映射minify
,自定义压缩配置项uglifyOptions
,uglifyjs
配置项extractComments
,注释操作配置warningsFilter
,过滤uglifyjs
警告配置
链接文章
webpack学习之路(六)hash/chunkHash/contentHash
webpack学习之路(五)loader初识及常用loader介绍
webpack学习之路(四)webpack-hot-middleware实现热更新
webpack学习之路(三)webpack-dev-middleware
webpack学习之路(二)webpack-dev-server实现热更新
I am moving forward.