【webpack】webpack 中的插件安装与使用
一、webpack 插件的作用
通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。
最常用的 的webpack 插件有如下两个：
1.webpack-dev-server（实时打包构建）
类似于 node.js 阶段用到的 nodemon 工具
每当修改了源代码，webpack 会自动进行项目的打包和构建
2.tml-webpack-plugin
webpack 中的 HTML 插件（类似于一个模板引擎插件）
可以通过此插件自定制 index.html 页面的内容
二、插件的安装
1.webpack-dev-server的安装
webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
（1）运行命令（下载）
# -D: 表示在开发阶段
npm install webpack-dev-server@3.11.0 -D
（2）修改 package.json -> scripts 中的 dev 命令如下
配置参数，加上了才会开启实时打包
"scripts": {
"dev": "webpack serve"
},（3）再次运行 npm run dev 命令，重新进行项目的打包
注意：有可能会出现如下错误
(node:15984) UnhandledPromiseRejectionWarning: TypeError: Class constructor ServeCommand cannot be invoked without 'new'
我们需要更新webpack-cli的版本，使用 npm install webpack-cli 命令即可！
注意：webpack-dev-server 会启动一个实时打包的 http 服务器
也就是说，如果我们想要看这个实时打包的效果，就可以去访问这个HTTP服务器！
点击src，就可以看到项目的首页
此时如果我们去修改文件（js），再点击ctrl+s保存，确实可以触发实时打包的效果；但是，它并不会生效！这是因为webpack开启实时打包后，生成的文件没有放到物理磁盘上，而是放到了内存中！
也就是说在我们磁盘dist目录下的”index_pack.js“还是”旧的“！！！
打包生成的文件哪儿去了？
假如不配置webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上
严格遵守开发者在webpack.config.js 中指定配置
根据output 节点指定路径进行存放
如果，配置了webpack-dev-server 之后，打包生成的文件存放到了内存中
不再根据output 节点指定的路径，存放到实际的物理磁盘上
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
生成到内存中的文件该如何访问？
webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。
可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
例如 /bundle.js 就表示要访问webpack-dev-server 生成到内存中的bundle.js 文件
<!-- webpack-dev-server 开启实时打包后，放在内存中，是虚拟的不可以见的-->
<script src="/index_pack.js"></script>2.tml-webpack-plugin的安装
在上面的案例中，我们访问 http://localhost:8080 并不能直接看到项目首页（index.html），要点击src目录才可以，这样子比较麻烦。
在浏览器中，如果我们访问了一层目录，在这一层目录下面有一个index.html，浏览器就会默认加载这个index.html
所以，如果我们想要访问：localhost:8080 就可以看到“主页面”的话，可以这样做，将 src 目录下的 index.html 首页，复制到项目根目录中一份！
html-webpack-plugin 是webpack 中的HTML 插件，可以通过此插件自定制 index.html 页面的内容。
（1）运行命令（下载）
npm install html-webpack-plugin@4.5.0 -D
（2）配置 html-webpack-plugin
// 1.导入 html-webpack-plugin插件
const HtmlPlugin = require('html-webpack-plugin');
// 2.创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html',
filename: './index.html'
})
module.exports = {
...
// 3.挂载插件的实例对象
plugins: [htmlPlugin]
}
（3）测试
注意事项
通过HTML 插件复制到项目根目录中的index.html 页面，也被放到了内存中
HTML 插件在生成的 index.html 页面的底部，自动注入了打包的bundle.js 文件
devServer节点
在webpack.config.js 配置文件中，可以通过devServer 节点对webpack-dev-server 插件进行更多的配置
module.exports = {
...
derServer: {
open: true, // 表示初次打包完立即打开浏览器
host: '127.0.0.1', // 实时打包所使用的主机地址
port: 80 // 实时打包所使用的端口号
}
};凡是修改了webpack.config.js 配置文件，或修改了package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
