demo 代码点此，篇幅有限，仅介绍几个常用的。
start
什么是 plugins ?
While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.
plugins 可用于执行范围更广的任务，如打包优化，资源管理和重新定义环境中的变量。
HtmlWebpackPlugin
该插件将为你生成一个 HTML5 文件， 并帮你引入 webpack 打包好的 js 等文件.
安装：
npm i -D html-webpack-plugin
在 webpack.config.js 中配置：
const path = require('path'); + const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // mode: 'production', mode: 'development', // 入口 // entry: './src/index.js', entry: { main: './src/index.js', }, module: {...}, + plugins: [ + new HtmlWebpackPlugin({ + title: 'webpack4 plugins 篇', + template: './src/index.html' + }), + ], // 出口 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, } 然后在 src 目录下创建 index.html 作为模板：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="root"></div> </body> </html>
CleanWebpackPlugin
用于删除/清除构建文件夹的 webpack 插件，其实就是打包前先把 dist 文件夹清空。
依然是安装：
npm i -D clean-webpack-plugin
然后配置：
// webpack.config.js const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); + const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { mode: 'development', entry: { main: './src/index.js', }, module: {...}, plugins: [ new HtmlWebpackPlugin({ title: 'webpack4 plugins 篇', template: './src/index.html' }), + new CleanWebpackPlugin(), ], // 出口 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, } HotModuleReplacementPlugin
模块热替换插件，即 HMR，webpack4 自带插件，无需安装，在开发者模式下配合devServer使用。
注意: 永远不要在生产环境(production)下启用 HMR
安装 webpack-dev-server：
npm i -D webpack-dev-server
配置：
// webpack.config.js ... + const webpack = require('webpack'); module.exports = { mode: 'development', entry: { main: './src/index.js', }, module: {...}, plugins: [ new HtmlWebpackPlugin({ title: 'webpack4 plugins 篇', template: './src/index.html' }), new CleanWebpackPlugin(), + new webpack.HotModuleReplacementPlugin(), ], + devServer: { + contentBase: path.resolve(__dirname, "dist"), + // 启用 gzip + compress: true, + open: true, + port: 9000, + hot: true, + hotOnly: true, + }, // 出口 output: {...}, } 然后在 package.josn 中的 script 里配置命令，方便实用。
// package.json ... "scripts": { + "start": "webpack-dev-server", "bundle": "webpack" }, ... 然后跑命令：
npm start
接着修改 index.less，切回浏览器，你会发现 css 效果已经改了。
可以试试修改 js 模块看看效果，修改 index.js：
// index.js // 在最后面加上这段代码 ... + if (module.hot) { + module.hot.accept('./components/Header', () => { + Header(); + }) + } 然后重新启动 webpack-dev-server，再修改 Header.js：
// Header.js ... header.innerText = '修改后的header'; ...
再切回浏览器，你会发现新增了一个修改过的 Header。
miniCssExtractPlugin
mini-css-extract-plugin 将CSS提取到单独的文件中，类似功能的有 extract-text-webpack-plugin(已废弃)，两者相比，mini-css-extract-plugin 的优点：
- 异步加载
- 没有重复的编译（性能）
- 更容易使用
- 特定于CSS
安装：
npm i -D mini-css-extract-plugin
然后配置：
// webpack.config.js ... + const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { mode: 'development', entry: {...}, module: { rules: [ ... { // 打包 css、less test: /\.(css|less)$/, use: [ // 这里一定要加 + { + loader: MiniCssExtractPlugin.loader, + }, { loader: 'css-loader', options: { importLoaders: 2, } }, 'less-loader', 'postcss-loader', ], }], }, plugins: [ ... + new MiniCssExtractPlugin({ + filename: 'css/[name].css', + chunkFilename: 'css/[id].css', + }), ], devServer: {...}, // 出口 output: {...}, } 接着执行npm run bundle打包，你会发现 css 都打包起来了。
PurgecssPlugin
可以去除未使用的 css，一般与 glob、glob-all 配合使用。
安装：
npm i -D purgecss-webpack-plugin glob
配置：
// webpack.config.js ... + const glob = require('glob'); + const PurgecssPlugin = require('purgecss-webpack-plugin'); module.exports = { mode: 'development', entry: {...}, module: {...}, plugins: [ ... + new PurgecssPlugin({ + paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, + { + // 不匹配目录，只匹配文件 + nodir: true, + }), + }), ], devServer: {...}, // 出口 output: {...}, } optimizeCssAssetsWebpackPlugin
在 production 下打包，js 文件是会自动压缩的，但 css 不会，所以使用 optimize-css-assets-webpack-plugin 进行压缩 css。
安装：
npm i -D optimize-css-assets-webpack-plugin
配置：
// webpack.config.js ... + const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); module.exports = { mode: 'development', entry: {...}, module: {...}, plugins: [ ... + new OptimizeCssAssetsPlugin(), ], devServer: {...}, // 出口 output: {...}, } 打包后，你会发现 css 文件都压缩好了。
篇幅有限，所以就不多 bb 了。