插件有什么作用？webpack有多少个插件？

webpack 是前端项目工程化的具体解决方案。 主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。

webpack通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个：

① webpack-dev-server

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

② html-webpack-plugin

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

1.webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。我们先来安装 webpack-dev-server ，运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

配置 webpack-dev-server， 修改 package.json -> scripts 中的 dev 命令如下：

"scripts":{
    "dev"："webpack serve",// script 节点下的脚本，可以通过 npm run 执行
}

再次运行 npm run dev 命令，重新进行项目的打包，在浏览器中访问 http://localhost:8080 地址，查看自动打包效果。webpack-dev-server 会启动一个实时打包的 http 服务器。

webpack打包生成的文件不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上。 所以应当严格遵守开发者在 webpack.config.js 中指定配置，根据 output 节点指定路径进行存放。

配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中。不再根据 output 节点指定的路径，存放到实际的物理磁盘上。提高了实时打包输出的性能，因为内存比物理磁盘速度快很多。

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

可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件 ，例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件。

2.html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

运行如下的命令，即可在项目中安装 html-webpack-plugin插件：

npm install html-webpack-plugin@5.3.2 -D

配置html-webpack-plugin的代码如下所示：

//1.导入HTML插件，得到一个构造函数
const HtmlPlugin = 
require('html-webpack-plugin')

// 2.创建HTML 插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template:'./src/index.html'，//指定原文件的存放路径
  filename：'./index.html'，//指定生成的文件的存放路径
})

module.exports = {
    mode: 'development',
    plugins:[htmlPlugin],// 3.通过 plugins节点,使htmlPlugin 插件生效
}

3.devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，示例代码如下：

devServer: {
    open：true,//初次打包完成后，自动打开浏览器
    host：'127.0.0.1'，//实时打包所使用的主机地址
    port：80，//实时打包所使用的端口号
}

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!