webpack基础教学，简单易懂（二）（webpack插件）

webpack中的插件

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

1. webpack插件的作用

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

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

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

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

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

1. webpack-dev-server
2. 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了嘛？并没有，那么，它去哪里了呢？
我们试一试，在根目录输入看看它到底有没有生成

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

打包生成的文件哪儿去了

这其实是webpack-dev-server这个插件搞的鬼

1. 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上（就是我们看到的目录的形式）

1. 严格遵守开发者在 webpack.config.js 中指定配置
2. 根据 output 节点指定路径进行存放

2. 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中（我们一下子是看不到的）

1. 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
2. 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

这样，我们就会有一个问题，生成到内存中的文件该如何访问？

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的

可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件

例如 /main.js 就表示要访问 webpack-dev-server 生成到内存中的 main.js 文件

这次，我们就可以看到更改后的样式了！

html-webpack-plugin

我们在上面发现，我们在访问的时候不是直接看到index.html的页面，而是

这样的形式，我们还得点src之后，才能看到我们想看到的页面，这让我们的体验很差，于是，我们就有了 html-webpack-plugin 这个插件

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。
通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份

1. 安装 html-webpack-plugin

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

npm install html-webpack-plugin@5.3.2 -D

2. 配置 html-webpack-plugin

3. 重新打包一下

终端重新 npm run dev 一下

这下我们就可以直接看到界面了！