一，webpack插件作用

实际上webpack实现的功能并不全是主包的，可以说主包只是提供了一个平台。真正完成一个项目的资源打包编译的，还是众多的webpack插件：

二，插件的分类

官网地址：https://webpack.js.org/plugins/
总共分为三类：

1，社区的插件
2，webpack内置的插件
3，第三方插件

二，使用webpack插件自动引入资源html-webpack-plugin

在第一节中，我们使用webpack打包出一个总的js文件。在index.html中是采用手动修改路径，然后才引入的，这样并不方便。我们想要实现的是webpack打包完成后自动帮助我们引入相关的资源。
于是就可以使用社区插件中的HtmlWebpackPlugin插件。
安装：

npm install --save-dev html-webpack-plugin

使用，当直接new HtmlWebpackPlugin(）的时候，会在dist文件夹下生成一个index.html，但是它只有一些基础的配置。如果想要自行配置，则需要一个自己给定的模板index.html,然后增加一些配置，配置的参考文档：https://github.com/jantimon/html-webpack-plugin#options

const HtmlWebpackPlugin = require("html-webpack-plugin");
plugins: [new HtmlWebpackPlugin({template: "./index.html", //用来做模板的html的文件路径filename: "app.html", //生成的html的名字inject: "body" //打包出来的那个js文件，放置在生成的body标签内})]

这样之后，打包出来的dist将会是：

三，清理上次的打包文件dist

只需要在output里面增加属性clean:true

四，搭建开发环境，更高的开发效率

1，开发模式

将mode的值修改为development

2，使用source map

当使用webpack打包源代码的时候，可能会很难追踪到error和warning在源代码的原始位置。例如，将a.js，b.js，c.js打包到一个bundle.js中。而其中的一个源文件包含一个错误，那么堆栈跟踪就会指向bundle.js。

为了更容易地追踪错误，可以使用source map功能。可以将编译后的代码映射回原始的源代码。如果一个错误来自b.js，source map就会明确地告诉你。

 devtool: "inline-source-map",

于是：

3，热更新

编译完成后，如果代码又有变更，则页面自动重新编译更新，不需要重新使用webpack进行更新。
需要在运行命令行的后面加上–watch进行编译打包。

但是这种情况下，还需要手动点击浏览器的刷新按钮才可。

4，使用webpack-dev-server

webpack-dev-server为我们提供了一个基本的web server,并且具有live reloading功能。
安装：

npm install --save-dev webpack-dev-server

配置：

  devServer: {static: "./dist" //执行dist作为根目录},

于是，这时候打包编译开发环境，就改成了这个命令：

npx webpack-dev-server

这时候呢，其实是打包编译到了我们电脑的内存中，在浏览器中打开，就会发现其实访问的是打包编译出来的dist文件夹，也就是刚刚我们给dev-server指定的根目录：