来源 | https://github.com/Michael-lzg/my--article/blob/master/webpack/
Plugin
何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。
Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。
-
是一个独立的模块。
-
模块对外暴露一个 js 函数。
-
函数的原型
(prototype)上定义了一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子，钩子的回调中能拿到当前编译的compilation对象，如果是异步编译插件的话可以拿到回调callback -
完成自定义子编译流程并处理
complition对象的内部数据。 -
如果异步编译插件的话，数据处理完成后执行
callback回调。
下面介绍 18 个常用的 webpack 插件。
1、HotModuleReplacementPlugin
模块热更新插件。 Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server ，后者是在打包文件改变时更新打包文件或者 reload 刷新整个页面， HRM 是只更新修改的部分。
HotModuleReplacementPlugin 是 webpack 模块自带的，所以引入 webpack 后，在 plugins 配置项中直接使用即可。
1`const webpack = require('webpack')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new webpack.HotModuleReplacementPlugin(), // 热更新插件` 17 18 19 20 21`]` 22 23
2、html-webpack-plugin
生成 html 文件。将 webpack 中 entry 配置的相关入口 chunk 和 extract-text-webpack-plugin 抽取的 css 样式 插入到该插件提供的 template 或者 templateContent 配置项指定的内容基础上生成一个 html 文件，具体插入方式是将样式 link 插入到 head 元素中， script 插入到 head 或者 body 中。
1`const HtmlWebpackPlugin = require('html-webpack-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new HtmlWebpackPlugin({` 17 18 19 20 21` filename: 'index.html',` 22 23 24 25 26` template: path.join(__dirname, '/index.html'),` 27 28 29 30 31` minify: {` 32 33 34 35 36` // 压缩HTML文件` 37 38 39 40 41` removeComments: true, // 移除HTML中的注释` 42 43 44 45 46` collapseWhitespace: true, // 删除空白符与换行符` 47 48 49 50 51` minifyCSS: true, // 压缩内联css` 52 53 54 55 56` },` 57 58 59 60 61` inject: true,` 62 63 64 65 66` }),` 67 68 69 70 71`]` 72 73
inject 有四个选项值
-
true：默认值，
script标签位于html文件的body底部 -
body：
script标签位于html文件的body底部（同 true） -
head：
script标签位于head标签内 -
false：不插入生成的 js 文件，只是单纯的生成一个
html文件
多页应用打包
有时，我们的应用不一定是一个单页应用，而是一个多页应用，那么如何使用 webpack 进行打包呢。
1`const path = require('path')` 2 3 4 5 6`const HtmlWebpackPlugin = require('html-webpack-plugin')` 7 8 9 10 11`module.exports = {` 12 13 14 15 16` entry: {` 17 18 19 20 21` index: './src/index.js',` 22 23 24 25 26` login: './src/login.js',` 27 28 29 30 31` },` 32 33 34 35 36` output: {` 37 38 39 40 41` path: path.resolve(__dirname, 'dist'),` 42 43 44 45 46` filename: '[name].[hash:6].js',` 47 48 49 50 51` },` 52 53 54 55 56` //...` 57 58 59 60 61` plugins: [` 62 63 64 65 66` new HtmlWebpackPlugin({` 67 68 69 70 71` template: './public/index.html',` 72 73 74 75 76` filename: 'index.html', //打包后的文件名` 77 78 79 80 81` }),` 82 83 84 85 86` new HtmlWebpackPlugin({` 87 88 89 90 91` template: './public/login.html',` 92 93 94 95 96` filename: 'login.html', //打包后的文件名` 97 98 99 100 101` }),` 102 103 104 105 106` ],` 107 108 109 110 111`}` 112 113
如果需要配置多个 HtmlWebpackPlugin ，那么 filename 字段不可缺省，否则默认生成的都是 index.html 。
但是有个问题， index.html 和 login.html 会发现，都同时引入了 index.f7d21a.js 和 login.f7d21a.js ，通常这不是我们想要的，我们希望 index.html 中只引入 index.f7d21a.js ， login.html 只引入 login.f7d21a.js 。
HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中
1`module.exports = {` 2 3 4 5 6` //...` 7 8 9 10 11` plugins: [` 12 13 14 15 16` new HtmlWebpackPlugin({` 17 18 19 20 21` template: './public/index.html',` 22 23 24 25 26` filename: 'index.html', //打包后的文件名` 27 28 29 30 31` chunks: ['index'],` 32 33 34 35 36` }),` 37 38 39 40 41` new HtmlWebpackPlugin({` 42 43 44 45 46` template: './public/login.html',` 47 48 49 50 51` filename: 'login.html', //打包后的文件名` 52 53 54 55 56` chunks: ['login'],` 57 58 59 60 61` }),` 62 63 64 65 66` ],` 67 68 69 70 71`}` 72 73
这样执行 npm run build ，可以看到 index.html 中仅引入了 index 的 js 文件，而 login.html 中也仅引入了 login 的 js 文件。
3、clean-webpack-plugin
clean-webpack-plugin 用于在打包前清理上一次项目生成的 bundle 文件，它会根据 output.path 自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。
1`const { CleanWebpackPlugin } = require('clean-webpack-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new HtmlWebpackPlugin({` 17 18 19 20 21` template: path.join(__dirname, '/index.html'),` 22 23 24 25 26` }),` 27 28 29 30 31` new CleanWebpackPlugin(), // 所要清理的文件夹名称` 32 33 34 35 36`]` 37 38
4、extract-text-webpack-plugin
将 css 成生文件，而非内联 。 该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象。
1`const ExtractTextPlugin = require('extract-text-webpack-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` // 将css分离到/dist文件夹下的css文件夹中的index.css` 17 18 19 20 21` new ExtractTextPlugin('css/index.css'),` 22 23 24 25 26`]` 27 28
5、mini-css-extract-plugin
将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap 。只能用在 webpack4 中，对比另一个插件 extract-text-webpack-plugin 有以下特点:
-
异步加载
-
不重复编译，性能更好
-
更容易使用
-
只针对 CSS
这个插件应该只用在生产环境配置，并且在 loaders 链中不使用 style-loader , 而且这个插件暂时不支持 HMR。
1`const MiniCssExtractPlugin = require('mini-css-extract-plugin')` 2 3 4 5 6 7 8 9 10 11`module.exports = {` 12 13 14 15 16` module: {` 17 18 19 20 21` rules: [` 22 23 24 25 26` {` 27 28 29 30 31` test: /\.(le|c)ss$/,` 32 33 34 35 36` use: [` 37 38 39 40 41` {` 42 43 44 45 46` loader: MiniCssExtractPlugin.loader,` 47 48 49 50 51` options: {` 52 53 54 55 56` publicPath: '../',` 57 58 59 60 61` },` 62 63 64 65 66` },` 67 68 69 70 71` 'css-loader',` 72 73 74 75 76` 'postcss-loader',` 77 78 79 80 81` 'less-loader',` 82 83 84 85 86` ],` 87 88 89 90 91` },` 92 93 94 95 96` ],` 97 98 99 100 101` },` 102 103 104 105 106` plugins: [` 107 108 109 110 111` new MiniCssExtractPlugin({` 112 113 114 115 116` filename: 'css/[name].[contenthash:8].css',` 117 118 119 120 121` chunkFilename: 'css/[id].[contenthash:8].css',` 122 123 124 125 126` }),` 127 128 129 130 131` ],` 132 133 134 135 136`}` 137 138
6、purifycss-webpack
有时候我们 css 写得多了或者重复了，这就造成了多余的代码，我们希望在生产环境进行去除。
1`const path = require('path')` 2 3 4 5 6`const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件` 7 8 9 10 11`const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css` 12 13 14 15 16 17 18 19 20 21`module.exports = merge(common, {` 22 23 24 25 26` plugins: [` 27 28 29 30 31` new PurifyCssWebpack({` 32 33 34 35 36` paths: glob.sync(path.join(__dirname, 'src/*.html')),` 37 38 39 40 41` }),` 42 43 44 45 46` ],` 47 48 49 50 51`})` 52 53
7、optimize-css-assets-webpack-plugin
我们希望减小 css 打包后的体积，可以用到 optimize-css-assets-webpack-plugin 。
1`const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码` 2 3 4 5 6 7 8 9 10 11`optimization: {` 12 13 14 15 16` minimizer: [` 17 18 19 20 21` // 压缩css` 22 23 24 25 26` new OptimizeCSSAssetsPlugin({})` 27 28 29 30 31` ]` 32 33 34 35 36` }` 37 38
8、UglifyJsPlugin
uglifyJsPlugin 是 vue-cli 默认使用的压缩代码方式，用来对 js 文件进行压缩，从而减小 js 文件的大小，加速 load 速度。
它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境将其关闭，生产环境部署时再把它打开。
1`const UglifyJsPlugin = require('uglifyjs-webpack-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new UglifyJsPlugin({` 17 18 19 20 21` uglifyOptions: {` 22 23 24 25 26` compress: {` 27 28 29 30 31` warnings: false` 32 33 34 35 36` }` 37 38 39 40 41` },` 42 43 44 45 46` sourceMap: true, //是否启用文件缓存` 47 48 49 50 51` parallel: true //使用多进程并行运行来提高构建速度` 52 53 54 55 56` })` 57 58
9、ParallelUglifyPlugin
开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过 UglifyJS 去压缩代码，但是变成了并行执行。
1`const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new ParallelUglifyPlugin({` 17 18 19 20 21` //cacheDir 用于配置缓存存放的目录路径。` 22 23 24 25 26` cacheDir: '.cache/',` 27 28 29 30 31` sourceMap: true,` 32 33 34 35 36` uglifyJS: {` 37 38 39 40 41` output: {` 42 43 44 45 46` comments: false,` 47 48 49 50 51` },` 52 53 54 55 56` compress: {` 57 58 59 60 61` warnings: false,` 62 63 64 65 66` },` 67 68 69 70 71` },` 72 73 74 75 76` }),` 77 78 79 80 81`]` 82 83
10、terser-webpack-plugin
Webpack4.0 默认是使用 terser-webpack-plugin 这个压缩插件，在此之前是使用 uglifyjs-webpack-plugin ，两者的区别是后者对 ES6 的压缩不是很好，同时我们可以开启 parallel 参数，使用多进程压缩，加快压缩。
1`const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码` 2 3 4 5 6 7 8 9 10 11`optimization: {` 12 13 14 15 16` minimizer: [` 17 18 19 20 21` new TerserPlugin({` 22 23 24 25 26` parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1` 27 28 29 30 31` cache: true, // 是否缓存` 32 33 34 35 36` sourceMap: false,` 37 38 39 40 41` }),` 42 43 44 45 46` ]` 47 48 49 50 51`}` 52 53
11、NoErrorsPlugin
报错但不退出 webpack 进程。编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
1`plugins: [new webpack.NoEmitOnErrorsPlugin()]` 2 3
12、compression-webpack-plugin
所有现代浏览器都支持 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
gzip 对基于文本格式文件的压缩效果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对已经压缩过的资源（如：图片）进行 gzip 压缩处理，效果很不好。
1`const CompressionPlugin = require('compression-webpack-plugin')` 2 3 4 5 6 7 8 9 10 11`plugins: [` 12 13 14 15 16` new CompressionPlugin({` 17 18 19 20 21` // gzip压缩配置` 22 23 24 25 26` test: /\.js$|\.html$|\.css/, // 匹配文件名` 27 28 29 30 31` threshold: 10240, // 对超过10kb的数据进行压缩` 32 33 34 35 36` deleteOriginalAssets: false, // 是否删除原文件` 37 38 39 40 41` }),` 42 43 44 45 46`]` 47 48
当然，这个方法还需要后端配置支持。
13、DefinePlugin
我们可以通过 DefinePlugin 可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，无需作任何声明， DefinePlugin 是 webpack 自带的插件。
1`plugins: [` 2 3 4 5 6` new webpack.DefinePlugin({` 7 8 9 10 11` DESCRIPTION: 'This Is The Test Text.',` 12 13 14 15 16` }),` 17 18 19 20 21`]` 22 23 24 25 26 27 28 29 30 31`// 直接引用` 32 33 34 35 36`console.log(DESCRIPTION)` 37 38
14、ProvidePlugin
自动加载模块。任何时候，当 identifier 被当作未赋值的变量时， module 就会自动被加载，并且 identifier 会被这个 module 输出的内容所赋值。这是 webpack 自带的插件。
1`module.exports = {` 2 3 4 5 6` resolve: {` 7 8 9 10 11` alias: {` 12 13 14 15 16` jquery: './lib/jquery',` 17 18 19 20 21` },` 22 23 24 25 26` },` 27 28 29 30 31` plugins: [` 32 33 34 35 36` //提供全局的变量，在模块中使用无需用require引入` 37 38 39 40 41` new webpack.ProvidePlugin({` 42 43 44 45 46` $: 'jquery',` 47 48 49 50 51` React: 'react',` 52 53 54 55 56` }),` 57 58 59 60 61` ],` 62 63 64 65 66`}` 67 68
15、DLLPlugin
这是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle) 。这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
使用步骤如下
1、在 build 下创建 webpack.dll.config.js
1`const path = require('path')` 2 3 4 5 6`const webpack = require('webpack')` 7 8 9 10 11`module.exports = {` 12 13 14 15 16` entry: {` 17 18 19 20 21` vendor: [` 22 23 24 25 26` 'vue-router',` 27 28 29 30 31` 'vuex',` 32 33 34 35 36` 'vue/dist/vue.common.js',` 37 38 39 40 41` 'vue/dist/vue.js',` 42 43 44 45 46` 'vue-loader/lib/component-normalizer.js',` 47 48 49 50 51` 'vue',` 52 53 54 55 56` 'axios',` 57 58 59 60 61` 'echarts',` 62 63 64 65 66` ],` 67 68 69 70 71` },` 72 73 74 75 76` output: {` 77 78 79 80 81` path: path.resolve('./dist'),` 82 83 84 85 86` filename: '[name].dll.js',` 87 88 89 90 91` library: '[name]_library',` 92 93 94 95 96` },` 97 98 99 100 101` plugins: [` 102 103 104 105 106` new webpack.DllPlugin({` 107 108 109 110 111` path: path.resolve('./dist', '[name]-manifest.json'),` 112 113 114 115 116` name: '[name]_library',` 117 118 119 120 121` }),` 122 123 124 125 126` // 建议加上代码压缩插件，否则dll包会比较大。` 127 128 129 130 131` new webpack.optimize.UglifyJsPlugin({` 132 133 134 135 136` compress: {` 137 138 139 140 141` warnings: false,` 142 143 144 145 146` },` 147 148 149 150 151` }),` 152 153 154 155 156` ],` 157 158 159 160 161`}` 162 163
2、在 webpack.prod.conf.js 的 plugin 后面加入配置
1`new webpack.DllReferencePlugin({` 2 3 4 5 6` manifest: require('../dist/vendor-manifest.json'),` 7 8 9 10 11`})` 12 13
3、 package.json 文件中添加快捷命令 (build:dll)
1`"scripts": {` 2 3 4 5 6` "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",` 7 8 9 10 11` "start": "npm run dev",` 12 13 14 15 16` "lint": "eslint --ext .js,.vue src",` 17 18 19 20 21` "build": "node build/build.js",` 22 23 24 25 26` "build:dll": "webpack --config build/webpack.dll.conf.js"` 27 28 29 30 31` }` 32 33
生产环境打包的时候先 npm run build:dll 命令会在打包目录下生成 vendor-manifest.json 文件与 vendor.dll.js 文件。然后 npm run build 生产其他文件。
4、根目录下的入口 index.html 加入引用
1`<script type="text/javascript" src="./vendor.dll.js"></script>` 2 3
16、HappyPack
HappyPack 能让 webpack 把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。要注意的是 HappyPack 对 file-loader 、 url-loader 支持的不友好，所以不建议对该 loader 使用。
1、HappyPack 插件安装
1`npm i -D happypack` 2 3
2、 webpack.base.conf.js 文件对 module.rules 进行配置
1`module: {` 2 3 4 5 6` rules: [` 7 8 9 10 11` {` 12 13 14 15 16` test: /\.js$/,` 17 18 19 20 21` use: ['happypack/loader?id=babel'],` 22 23 24 25 26` include: [resolve('src'), resolve('test')],` 27 28 29 30 31` exclude: path.resolve(__dirname, 'node_modules'),` 32 33 34 35 36` },` 37 38 39 40 41` {` 42 43 44 45 46` test: /\.vue$/,` 47 48 49 50 51` use: ['happypack/loader?id=vue'],` 52 53 54 55 56` },` 57 58 59 60 61` ]` 62 63 64 65 66`}` 67 68
3、在生产环境 webpack.prod.conf.js 文件进行配置
1`const HappyPack = require('happypack')` 2 3 4 5 6`// 构造出共享进程池，在进程池中包含5个子进程` 7 8 9 10 11`const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })` 12 13 14 15 16`plugins: [` 17 18 19 20 21` new HappyPack({` 22 23 24 25 26` // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件` 27 28 29 30 31` id: 'babel',` 32 33 34 35 36` // 如何处理.js文件，用法和Loader配置中一样` 37 38 39 40 41` loaders: ['babel-loader?cacheDirectory'],` 42 43 44 45 46` threadPool: HappyPackThreadPool,` 47 48 49 50 51` }),` 52 53 54 55 56` new HappyPack({` 57 58 59 60 61` id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件` 62 63 64 65 66` loaders: [` 67 68 69 70 71` {` 72 73 74 75 76` loader: 'vue-loader',` 77 78 79 80 81` options: vueLoaderConfig,` 82 83 84 85 86` },` 87 88 89 90 91` ],` 92 93 94 95 96` threadPool: HappyPackThreadPool,` 97 98 99 100 101` }),` 102 103 104 105 106`]` 107 108
注意，当项目较小时，多线程打包反而会使打包速度变慢。
17、copy-webpack-plugin
我们在 public/index.html 中引入了静态资源，但是打包的时候 webpack 并不会帮我们拷贝到 dist 目录，因此 copy-webpack-plugin 就可以很好地帮我做拷贝的工作了。
1`const CopyWebpackPlugin = require('copy-webpack-plugin')` 2 3 4 5 6`module.exports = {` 7 8 9 10 11` plugins: [` 12 13 14 15 16` new CopyWebpackPlugin({` 17 18 19 20 21` patterns: [` 22 23 24 25 26` {` 27 28 29 30 31` from: 'public/js/*.js',` 32 33 34 35 36` to: path.resolve(__dirname, 'dist', 'js'),` 37 38 39 40 41` flatten: true,` 42 43 44 45 46` },` 47 48 49 50 51` ],` 52 53 54 55 56` }),` 57 58 59 60 61` ],` 62 63 64 65 66`}` 67 68
18、IgnorePlugin
这是 webpack 内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。
比如我们要使用 moment 这个第三方依赖库，该库主要是对时间进行格式化，并且支持多个国家语言。虽然我设置了语言为中文，但是在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。
对此，我们可以用 IgnorePlugin 使得指定目录被忽略，从而使得打包变快，文件变小。
1`const Webpack = require('webpack')` 2 3 4 5 6`plugins: [` 7 8 9 10 11` //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去` 12 13 14 15 16` new Webpack.IgnorePlugin(/\.\/locale/, /moment/),` 17 18 19 20 21`]` 22 23
我们虽然按照上面的方法忽略了包含 ’./locale/' 该字段路径的文件目录，但是也使得我们使用的时候不能显示中文语言了，所以这个时候可以手动引入中文语言的目录。
1`import moment from 'moment'` 2 3 4 5 6 7 8 9 10 11`//手动引入所需要的语言包` 12 13 14 15 16`import 'moment/locale/zh-cn'` 17 18 19 20 21 22 23 24 25 26`moment.locale('zh-cn')` 27 28 29 30 31 32 33 34 35 36`let r = moment().endOf('day').fromNow()` 37 38 39 40 41`console.log(r)` 42 43
本文完~
本文分享自微信公众号 - web前端开发（web_qdkf）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。