webpack对html压缩,webpack学习之路（八）压缩代码

代码的压缩可以分为三个部分，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警告配置

链接文章

I am moving forward.