前言
何为插件(Plugin)？专一解决 webpack 在编译过程中的某个特定的工作的功能模块，能够称为插件。
Plugin 是一个扩展器，它丰盛了 webpack 自身，针对是 loader 完结后，webpack 打包的整个过程，它并不间接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行宽泛的工作。
Plugin 的特点
- 是一个独立的模块
- 模块对外裸露一个 js 函数
- 函数的原型
(prototype)上定义了一个注入compiler对象的apply办法apply函数中须要有通过compiler对象挂载的webpack事件钩子，钩子的回调中能拿到以后编译的compilation对象，如果是异步编译插件的话能够拿到回调callback - 实现自定义子编译流程并解决
complition对象的外部数据 - 如果异步编译插件的话，数据处理实现后执行
callback回调。
HotModuleReplacementPlugin
模块热更新插件。Hot-Module-Replacement 的热更新是依赖于 webpack-dev-server，后者是在打包文件扭转时更新打包文件或者 reload 刷新整个页面，HRM 是只更新批改的局部。
HotModuleReplacementPlugin是webpack模块自带的，所以引入webpack后，在plugins配置项中间接应用即可。
const webpack = require('webpack')plugins: [ new webpack.HotModuleReplacementPlugin(), // 热更新插件]html-webpack-plugin
生成 html 文件。将 webpack 中entry配置的相干入口 chunk 和 extract-text-webpack-plugin抽取的 css 款式 插入到该插件提供的template或者templateContent配置项指定的内容根底上生成一个 html 文件，具体插入方式是将款式link插入到head元素中，script插入到head或者body中。
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, }),]inject 有四个选项值
- true：默认值，
script标签位于html文件的body底部 - body：
script标签位于html文件的body底部（同 true） - head：
script标签位于head标签内 - false：不插入生成的 js 文件，只是单纯的生成一个
html文件
多页利用打包
有时，咱们的利用不肯定是一个单页利用，而是一个多页利用，那么如何应用 webpack 进行打包呢。
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 文件中
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 文件。
clean-webpack-plugin
clean-webpack-plugin 用于在打包前清理上一次我的项目生成的 bundle 文件，它会依据 output.path 主动清理文件夹；这个插件在生产环境用的频率十分高，因为生产环境常常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹十分宏大。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname, '/index.html'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称]extract-text-webpack-plugin
将 css 成生文件，而非内联 。该插件的次要是为了抽离 css 款式,避免将款式打包在 js 中引起页面款式加载错乱的景象
const ExtractTextPlugin = require('extract-text-webpack-plugin')plugins: [ // 将css拆散到/dist文件夹下的css文件夹中的index.css new ExtractTextPlugin('css/index.css'),]mini-css-extract-plugin
将 CSS 提取为独立的文件的插件，对每个蕴含 css 的 js 文件都会创立一个 CSS 文件，反对按需加载 css 和 sourceMap。只能用在 webpack4 中，比照另一个插件 extract-text-webpack-plugin 有以下特点:
- 异步加载
- 不反复编译，性能更好
- 更容易应用
- 只针对 CSS
这个插件应该只用在生产环境配置，并且在 loaders 链中不应用 style-loader, 而且这个插件临时不反对 HMR
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', }), ],}purifycss-webpack
有时候咱们 css 写得多了或者反复了，这就造成了多余的代码，咱们心愿在生产环境进行去除。
const path = require('path')const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件const glob = require('glob') // 引入glob模块,用于扫描全副html文件中所援用的cssmodule.exports = merge(common, { plugins: [ new PurifyCssWebpack({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }), ],})optimize-css-assets-webpack-plugin
咱们心愿减小 css 打包后的体积，能够用到 optimize-css-assets-webpack-plugin。
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码optimization: { minimizer: [ // 压缩css new OptimizeCSSAssetsPlugin({}) ]UglifyJsPlugin
uglifyJsPlugin 是 vue-cli 默认应用的压缩代码形式，用来对 js 文件进行压缩，从而减小 js 文件的大小，减速 load 速度。它应用的是单线程压缩代码，打包工夫较慢，所以能够在开发环境将其敞开，生产环境部署时再把它关上。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')plugins: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: true, //是否启用文件缓存 parallel: true //应用多过程并行运行来进步构建速度 })ParallelUglifyPlugin
开启多个子过程，把对多个文件压缩的工作别离给多个子过程去实现，每个子过程其实还是通过 UglifyJS 去压缩代码，然而变成了并行执行。
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')plugins: [ new ParallelUglifyPlugin({ //cacheDir 用于配置缓存寄存的目录门路。 cacheDir: '.cache/', sourceMap: true, uglifyJS: { output: { comments: false, }, compress: { warnings: false, }, }, }),]terser-webpack-plugin
Webpack4.0 默认是应用 terser-webpack-plugin 这个压缩插件，在此之前是应用 uglifyjs-webpack-plugin，两者的区别是后者对 ES6 的压缩不是很好，同时咱们能够开启 parallel 参数，应用多过程压缩，放慢压缩。
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码optimization: { minimizer: [ new TerserPlugin({ parallel: 4, // 开启几个过程来解决压缩，默认是 os.cpus().length - 1 cache: true, // 是否缓存 sourceMap: false, }), ]}NoErrorsPlugin
报错但不退出 webpack 过程。编译呈现谬误时，应用 NoEmitOnErrorsPlugin 来跳过输入阶段。这样能够确保输入资源不会蕴含谬误。
plugins: [new webpack.NoEmitOnErrorsPlugin()]compression-webpack-plugin
所有古代浏览器都反对 gzip 压缩，启用 gzip 压缩可大幅缩减传输资源大小，从而缩短资源下载工夫，缩小首次白屏工夫，晋升用户体验。
gzip 对基于文本格式文件的压缩成果最好（如：CSS、JavaScript 和 HTML），在压缩较大文件时往往可实现高达 70-90% 的压缩率，对曾经压缩过的资源（如：图片）进行 gzip 压缩解决，成果很不好。
const CompressionPlugin = require('compression-webpack-plugin')plugins: [ new CompressionPlugin({ // gzip压缩配置 test: /\.js$|\.html$|\.css/, // 匹配文件名 threshold: 10240, // 对超过10kb的数据进行压缩 deleteOriginalAssets: false, // 是否删除原文件 }),]当然，这个办法还须要后端配置反对。
DefinePlugin
咱们能够通过 DefinePlugin 能够定义一些全局的变量，咱们能够在模块当中间接应用这些变量，无需作任何申明，DefinePlugin 是 webpack 自带的插件。
plugins: [ new webpack.DefinePlugin({ DESCRIPTION: 'This Is The Test Text.', }),]// 间接援用console.log(DESCRIPTION)ProvidePlugin
主动加载模块。 任何时候，当 identifier 被当作未赋值的变量时， module 就会主动被加载，并且 identifier 会被这个 module 输入的内容所赋值。这是 webpack 自带的插件。
module.exports = { resolve: { alias: { jquery: './lib/jquery', }, }, plugins: [ //提供全局的变量，在模块中应用无需用require引入 new webpack.ProvidePlugin({ $: 'jquery', React: 'react', }), ],}DLLPlugin
这是在一个额定的独立的 webpack 设置中创立一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件，这个文件是用来让 DLLReferencePlugin 映射到相干的依赖下来的。
应用步骤如下
1、在 build 下创立 webpack.dll.config.js
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 的 plugin 前面退出配置
new webpack.DllReferencePlugin({ manifest: require('../dist/vendor-manifest.json'),})3、package.json文件中增加快捷命令(build:dll)
"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 退出援用
<script type="text/javascript" src="./vendor.dll.js"></script>HappyPack
HappyPack 能让 webpack 把工作合成给多个子过程去并发的执行，子过程解决完后再把后果发送给主过程。要留神的是 HappyPack 对 file-loader、url-loader 反对的不敌对，所以不倡议对该 loader 应用。
1、HappyPack 插件装置
npm i -D happypack2、webpack.base.conf.js 文件对 module.rules 进行配置
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 文件进行配置
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, }),]留神，当我的项目较小时，多线程打包反而会使打包速度变慢。
copy-webpack-plugin
咱们在 public/index.html 中引入了动态资源，然而打包的时候 webpack 并不会帮咱们拷贝到 dist 目录，因而 copy-webpack-plugin 就能够很好地帮我做拷贝的工作了。
const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = { plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'public/js/*.js', to: path.resolve(__dirname, 'dist', 'js'), flatten: true, }, ], }), ],}IgnorePlugin
这是 webpack 内置插件，它的作用是：疏忽第三方包指定目录，让这些指定目录不要被打包进去。
比方咱们要应用 moment 这个第三方依赖库，该库次要是对工夫进行格式化，并且反对多个国家语言。尽管我设置了语言为中文，然而在打包的时候，是会将所有语言都打包进去的。这样就导致包很大，打包速度又慢。对此，咱们能够用 IgnorePlugin 使得指定目录被疏忽，从而使得打包变快，文件变小。
const Webpack = require('webpack')plugins: [ //moment这个库中，如果援用了./locale/目录的内容，就疏忽掉，不会打包进去 new Webpack.IgnorePlugin(/\.\/locale/, /moment/),]咱们尽管依照下面的办法疏忽了蕴含’./locale/'该字段门路的文件目录，然而也使得咱们应用的时候不能显示中文语言了，所以这个时候能够手动引入中文语言的目录。
import moment from 'moment'//手动引入所须要的语言包import 'moment/locale/zh-cn'moment.locale('zh-cn')let r = moment().endOf('day').fromNow()console.log(r)原文地址