这篇文章整理了18个Webpack插件，分享给Web开发的小伙伴。Plugin是一个扩展器，它丰富了webpack本身，针对的是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些分段，执行广泛的任务。
插件的特点
- 是一个独立的模块
- 模块对外暴露一个js函数
- 函数的原型(prototype)上定义了一个注入compiler对象的apply方法apply函数中需要有通过compiler对象挂载的webpack事件钩子，钩子的替换中能拿到当前编译的compilation对象，如果是异步编译插件的话可以拿到一部分callback
- 完成自定义子编译流程并处理complition对象的内部数据
- 如果异步编译插件的话，数据处理完成后执行callback替换。
下面介绍18个常用的webpack插件。
本文在gitthub作收录：github.com/Michael-lzg ...
01、HotModuleReplacementPlugin
模块热更新插件。Hot-Module-Replacement的热更新是依赖于webpack-dev-server，有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面，HRM是只更新修改的部分。
HotModuleReplacementPlugin是webpack模块自带的，所以约会webpack后，在plugins配置项中直接使用即可。
代码语言：javascript复制const webpack = require('webpack')
plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新插件]02、html-webpack-plugin
生成HTML文件。将的WebPack中entry配置的相关入口chunk状语从句：extract-text-webpack-plugin抽取的CSS样式插入到该插件提供的template或者templateContent配置项指定的内容基础上生成一个HTML文件，具体插入方式的英文将样式link插入到head元素中，script插入到head或者body中。
代码语言：javascript复制const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: path.join(__dirname, '/index.html'), minify: { // 压缩HTML文件 removeComments: true, // 移除HTML中的注释 collapseWhitespace: true, // 删除空白符与换行符 minifyCSS: true, // 压缩内联css }, inject: true, }),]注入有四个选项值
- true：数值，script标签位于html文件的body底部
- 正文：script标签位于html文件的body底部（同true）
- 头：script标签位于head标签内
- false：不插入生成的js文件，只是单纯的生成一个html文件
多页应用打包
有时，我们的应用不一定是一个单页应用，或者一个多页应用，那么如何使用webpack进行打包呢。
代码语言：javascript复制const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { entry: { index: './src/index.js', login: './src/login.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash:6].js', }, //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包后的文件名 }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包后的文件名 }), ],}如果需要配置多个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文件中
代码语言：javascript复制module.exports = { //... plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', filename: 'index.html', //打包后的文件名 chunks: ['index'], }), new HtmlWebpackPlugin({ template: './public/login.html', filename: 'login.html', //打包后的文件名 chunks: ['login'], }), ],}这样执行npm run build，可以看到index.html中仅约会了index的js文件，而login.html中也仅约会了login的js文件。
03、clean-webpack-plugin
clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。
代码语言：javascript复制const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称]04、提取文本Webpack插件
该插件的主要是为了抽离css样式，防止将样式打包在js中引起页面样式加载错乱的现象
代码语言：javascript复制const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [ // 将css分离到/dist文件夹下的css文件夹中的index.css new ExtractTextPlugin('css/index.css'),]05、迷你CSS提取插件
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件，支持按需加载css和sourceMap。只能用在webpack4中，对比另一个插件extract-text-webpack-plugin有以下特点：
- 初步加载
- 不重复编译，性能更好
- 更容易使用
- 只针对CSS
这个插件应该只用在生产环境配置，并且在loaders链中不使用style-loader，而且这个插件暂时不支持HMR
代码语言：javascript复制const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = { module: { rules: [ { test: /.(le|c)ss$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../', }, }, 'css-loader', 'postcss-loader', 'less-loader', ], }, ], }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[contenthash:8].css', chunkFilename: 'css/[id].[contenthash:8].css', }), ],}06、purifycss-webpack
有时候我们css写更多了或者重复了，由此造成了多余的代码，我们希望在生产环境进行移除。
代码语言：javascript复制const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css
module.exports = merge(common, { plugins: [ new PurifyCssWebpack({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }), ],})07、优化CSS资产Webpack插件
我们希望串联css打包后的体积，可以用到optimize-css-assets-webpack-plugin。
代码语言：javascript复制const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码
optimization: { minimizer: [ // 压缩css new OptimizeCSSAssetsPlugin({}) ]08、UglifyJsPlugin
uglifyJsPlugin是vue-cli默认使用的压缩代码方式，用于对js文件进行压缩，从而替换js文件的大小，加速加载速度。它使用的是单线程压缩代码，打包时间较慢，所以可以在开发环境中将其关闭，生产环境部署时再把它打开。
代码语言：javascript复制const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, //是否启用文件缓存 parallel: true //使用多进程并行运行来提高构建速度 })09、ParallelUglifyPlugin
开启多个子进程，把对多个文件压缩的工作分别给多个子进程去完成，每个子进程其实还是通过UglifyJS去压缩代码，但是变成了并行执行。
代码语言：javascript复制const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [ new ParallelUglifyPlugin({ //cacheDir 用于配置缓存存放的目录路径。 cacheDir: '.cache/', sourceMap: true, uglifyJS: { output: { comments: false, }, compress: { warnings: false, }, }, }),]10、terser-webpack-plugin
Webpack4.0默认是使用terser-webpack-plugin该压缩插件，在此之前是使用uglifyjs-webpack-plugin，其中的区别是内置对ES6的压缩不是很好，同时我们可以打开parallel参数，使用多进程压缩，加快压缩。
代码语言：javascript复制const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码
optimization: { minimizer: [ new TerserPlugin({ parallel: 4, // 开启几个进程来处理压缩，默认是 os.cpus().length - 1 cache: true, // 是否缓存 sourceMap: false, }), ]}11、NoErrorsPlugin
报错但不退出webpack进程。编译出现错误时，使用NoEmitOnErrorsPlugin来跳过输出阶段。这样可以确保输出资源不会包含错误。
代码语言：javascript复制plugins: [new webpack.NoEmitOnErrorsPlugin()]12、压缩webpack插件
所有现代浏览器都支持gzip压缩，gzip启用压缩可扩展的扩展传输资源大小，从而缩短资源下载时间，减少首次白屏时间，提升用户体验。
gzip对基于文本格式文件的压缩效果最好（如：CSS，JavaScript和HTML），在压缩压缩文件时往往可实现高达70-90％的压缩率，对已经压缩过的资源（如：图片）进行gzip压缩处理，效果很不好。
代码语言：javascript复制const CompressionPlugin = require('compression-webpack-plugin')
plugins: [ new CompressionPlugin({ // gzip压缩配置 test: /.js$|.html$|.css/, // 匹配文件名 threshold: 10240, // 对超过10kb的数据进行压缩 deleteOriginalAssets: false, // 是否删除原文件 }),]当然，这个方法还需要预先配置支持。
13、定义插件
我们可以通过DefinePlugin可以定义一些变量的变量，我们可以在模块之间直接使用这些变量，无需作任何声明，DefinePlugin是webpack自带的插件。
代码语言：javascript复制plugins: [ new webpack.DefinePlugin({ DESCRIPTION: 'This Is The Test Text.', }),]
// 直接引用console.log(DESCRIPTION)14、ProvidePlugin
自动加载模块。任何时候，当identifier被当作未赋值的变量时，module就会自动被加载，并且identifier会被这个模块输出的内容所赋值。这是webpack自带的插件。
代码语言：javascript复制module.exports = { resolve: { alias: { jquery: './lib/jquery', }, }, plugins: [ //提供全局的变量，在模块中使用无需用require引入 new webpack.ProvidePlugin({ $: 'jquery', React: 'react', }), ],}15、DLL插件
这是在一个额外的独立的webpack设置中创建一个只有dll的bundle(dll-only-bundle)。这个插件会生成一个称为manifest.json的文件，这个文件是用来让DLLReferencePlugin映射到相关的依赖上去的。
使用步骤如下
1，在build下创造 webpack.dll.config.js
代码语言：javascript复制const path = require('path')const webpack = require('webpack')module.exports = { entry: { vendor: [ 'vue-router', 'vuex', 'vue/dist/vue.common.js', 'vue/dist/vue.js', 'vue-loader/lib/component-normalizer.js', 'vue', 'axios', 'echarts', ], }, output: { path: path.resolve('./dist'), filename: '[name].dll.js', library: '[name]_library', }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./dist', '[name]-manifest.json'), name: '[name]_library', }), // 建议加上代码压缩插件，否则dll包会比较大。 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }), ],}2，在webpack.prod.conf.js的插件后面加入配置
代码语言：javascript复制new webpack.DllReferencePlugin({ manifest: require('../dist/vendor-manifest.json'),})3，package.json文件中添加快捷命令(build:dll)
代码语言：javascript复制"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue src", "build": "node build/build.js", "build:dll": "webpack --config build/webpack.dll.conf.js" }生产环境打包的时候先npm run build:dll命令会在打包目录下生成vendor-manifest.json文件与vendor.dll.js文件。然后npm run build生产其他文件。
4，根目录下的入口index.html加入引用
代码语言：javascript复制<script type="text/javascript" src="./vendor.dll.js"></script>16、快乐包
HappyPack实现webpack把任务分解给多个子进程去并发执行，子进程处理完后再把结果发送给主进程。要注意的HappyPack对file-loader，url-loader支持的不友好，所以不建议该加载程序使用。
1，HappyPack插件安装
代码语言：javascript复制npm i -D happypack2，webpack.base.conf.js文件对module.rules进行配置
代码语言：javascript复制module: { rules: [ { test: /.js$/, use: ['happypack/loader?id=babel'], include: [resolve('src'), resolve('test')], exclude: path.resolve(__dirname, 'node_modules'), }, { test: /.vue$/, use: ['happypack/loader?id=vue'], }, ]}3，在生产环境webpack.prod.conf.js文件进行配置
代码语言：javascript复制const HappyPack = require('happypack')// 构造出共享进程池，在进程池中包含5个子进程const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })plugins: [ new HappyPack({ // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件 id: 'babel', // 如何处理.js文件，用法和Loader配置中一样 loaders: ['babel-loader?cacheDirectory'], threadPool: HappyPackThreadPool, }), new HappyPack({ id: 'vue', // 用唯一的标识符id，来代表当前的HappyPack是用来处理一类特定的文件 loaders: [ { loader: 'vue-loader', options: vueLoaderConfig, }, ], threadPool: HappyPackThreadPool, }),]注意，当项目较小时，多线程打包反而扩大打包速度变慢。
17、复制webpack插件
我们在public/index.html中约会了静态资源，但是打包的时候webpack并不会帮我们拷贝到dist目录，因此copy-webpack-plugin就可以很好地帮我做拷贝的工作了。
代码语言：javascript复制const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'public/js/*.js', to: path.resolve(__dirname, 'dist', 'js'), flatten: true, }, ], }), ],}18、忽略插件
这是webpack内置插件，它的作用是：忽略第三方包指定目录，让这些指定目录不要被打包进去。
例如我们要使用moment这个第三方依赖库，该库主要是对时间进行格式化，并支持多种国家语言。虽然我设置了语言为中文，但是在打包的时候，是替换所有语言都打包进去的。这样就导致包很大，打包速度又慢。这样做，我们可以IgnorePlugin使用指定目录被忽略，从而使打包变快，文件变小。
代码语言：javascript复制const Webpack = require('webpack')plugins: [ //moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去 new Webpack.IgnorePlugin(/./locale/, /moment/),]我们虽然按照上面的方法忽略了包含’./locale/'该分区路径的文件目录，但是也因为我们使用的时候不能显示中文语言了，所以这个时候可以手动发布中文语言的目录。
代码语言：javascript复制import moment from 'moment'
//手动引入所需要的语言包import 'moment/locale/zh-cn'
moment.locale('zh-cn')
let r = moment().endOf('day').fromNow()console.log(r)本文完~
