webpack中的插件

我们在上一篇中知道了什么是前端工程化，并且知道了webpack的一些基本的使用，但是我们会发现，webpack使用起来并不方便，并且还有点不太懂，这次将会引入 webpack插件 这个概念，带大家感受webpack真正强大的地方

1. webpack插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便

看到第三方插件，我们第一反应就是包，它们两个是一个意思
这里题外引出一个node.js 模块化的概念，如果不了解什么是模块化的话，希望对大家有所帮助

Node.js 中根据模块来源的不同，将模块分为了 3 大类，分别是：

内置模块（内置模块是由 Node.js 官方提供的，例如 fs、path、http 等）
自定义模块（用户创建的每个 .js 文件，都是自定义模块）
第三方模块（由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载）

回归正传！！
webpack 插件有如下两个：

webpack-dev-server

html-webpack-plugin

webpack-dev-server的作用：

类似于 node.js 阶段用到的 nodemon 工具
每当修改了源代码，webpack 会自动进行项目的打包和构建

简单理解是什么意思呢？：就是我们每改一次代码，我们都需要重新在终端里面重新输入 npm run dev，这样是不是太麻烦了，这个插件的作用就是，我们更改代码后，不需要再重新输入npm run dev，这个指令了，自动就会更改了！是不是方便了许多！也就是：实时自动打包功能

html-webpack-plugin的作用：

webpack 中的 HTML 插件（类似于一个模板引擎插件）
可以通过此插件自定制 index.html 页面的内容

2. webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建

安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

配置 webpack-dev-server

1.修改 package.json -> scripts 中的 dev

2.再次运行 npm run dev 命令，重新进行项目的打包

3.在浏览器中访问 http://localhost:8080 地址，查看自动打包效果，我们遗憾地发现，看不到更新后的样式，什么情况？

这里注意看这行代码， webpack output 这个代码熟不熟悉，output，是不是我们打包出去的路径，代码最后一个符号是 / ,什么意思？就是说我们打包生成的main.js与根目录平级

但是我们看到main.js了嘛？并没有，那么，它去哪里了呢？
我们试一试，在根目录输入看看它到底有没有生成

我们发现，它生成了！但是这是什么情况，带着大家理解一下