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警告配置

---

连接文章

webpack学习之路（七）source map

webpack学习之路（六）hash/chunkHash/contentHash

webpack学习之路（五）loader初识及经常使用loader介绍

webpack学习之路（四）webpack-hot-middleware实现热更新

webpack学习之路（三）webpack-dev-middleware

webpack学习之路（二）webpack-dev-server实现热更新

webpack学习之路（一）基础配置

I am moving forward.