Plugins(插件)
扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等
插件是 webpack 的支柱功能。插件目的在于解决 loader 无法实现的其他事。
1.HtmlWebpackPlugin
作用：在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中
安装：npm install --save-dev html-webpack-plugin
使用：1.在webpack.config.js文件中使用require语句引入
2.在plugins中配置信息
配置信息：
1.filename:生成的html文件名称,默认是 index.html
2.template:html模板文件路径
3.title:⽤来生成⻚面的 title 元素
4.inject: true | 'head' | 'body' | false，注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
5.favicon: 添加特定的 favicon 路径到输出的 HTML 文件中
6.minify: {} | false， 传递 html-minifier 选项给 minify 输出
7.hash: true | false，如果为 true，将添加 webpack 编译生成的 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有用
cache: true | false，如果为 true，这是默认值，仅在文件修改之后才会发布文件
showErrors: true | false，如果为 true，这是默认值，错误信息会写入到 HTML ⻚面中
8.chunks: 允许只添加某些块 (⽐如，仅 unit test 块)
9.chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，⽀持的值:'none' | 'default' |{function}-default:'auto'
10.excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)
在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值
2.clean-webpack-plugin
作用：在每次构建前清理 /dist 文件夹
安装：npm install --save-dev clean-webpack-plugin
使用：1.在webpack.config.js文件中使用require语句引入
2.在plugins中配置信息
3.mini-css-extract-plugin
作用：提取 CSS 到一个单独的文件中
安装：npm install --save-dev mini-css-extract-plugin
使用：1.在webpack.config.js文件中使用require语句引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2.与css-loader配合使用,代替html-loader
3.在plugins中配置信息
4.sourceMap
我们实际运行在浏览器的代码是通过 webpack 打包合并甚至是压缩混淆过的代码，所生成的代码并不利于我们的调试和错误定位，我们可以通过 sourceMap 来解决这个问题，sourceMap 本质是一个记录了编译后代码与源代码的映射关系的文件，我们可以通过 webpack 的 devtool 选项来开启 sourceMap
使用：直接在webpack.config.js中配置即可 编译后会为每一个编译文件生成一个对应的
.map 文件，同时在编译文件中添加一段对应的 map 文件引入代码
同时，现代浏览器都能够识别 sourceMap 文件，如 chrome，会在 Sources 面板中显示根据编译文件与对应的 map 文件定位到源文件中，有利于我们的调试和错误定位
5.webpackDevServer
每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验
作用：自动刷新页面
安装：npm install --save-dev webpack-dev-server
启动：npx webpack-dev-server
或在package.json中添加scripts,然后npm run server
使用：修改webpack.config.js
6.Proxy
作用：WebpackDevServer 内置了一个代理服务，通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer 内置的代理发送的请求属于后端 - node，不受同源策略限制)
使用：在webpack.config.js下的devServer中配置proxy
后端路由配置：
前端代码发送ajax请求：
通过 proxy 设置，当我们在当前 WebpackDevServer 环境下发送以 /api 开头的请求都会被转发到 http://localhost:8787 目标服务器下
7.Hot Module Replacement
作用：局部（模块）更新，也就是不刷新页面，只更新变化的部分
使用：在webpack.config.js中的devServer进行配置hot和hotOnly
开启 HMR 以后，当代码发生变化，webpack 即会进行编译，并通过 websocket 通知客户端(浏览器)，我们需要监听处理来自 webpack 的通知，然后通过 HMR 提供的 API 来完成我们的局部更新逻辑