Loader和Plugin是webpack最强大的两个功能，Loader能各类型的文件转换成js能够解析的内容，而plugin则提供更强、更广的功能支持。

首先在使用plugin之前，我们先来整理一下输出配置。

管理输出

目前的输出太简单粗暴，直接将所有内容输出到dist目录的mian.js文件中，然而后面随着应用程序增长，可能会使用代码分离或者多个入口文件，这时就会产生多个bundle文件，因此我们需要配置输出文件格式，让打包文件按照一定的格式命名。

output: {
	path: join(__dirname, "dist"),
	filename: "[name].[hash].bundle.js", // 设置文件名格式
},

打包后生成文件*main.524f38c4228dacf0de12.bundle*

而使用哈希作为文件名后，再手动到index.html中导入脚本文件就变得困难了，因为文件名可能每次都不一样，但是我们可以通过插件来自动生成html。

使用插件

使用插件也非常简单，以html-webpack-plugin为例，它的作用前面也讲过，每次打包在输出目录下自动生成一个导入bundle.js的html文件。

第一步仍然是安装插件

npm i -D html-webpack-plugin

然后在webpack配置文件中使用该插件

import HtmlWebpackPlugin from "html-webpack-plugin";
// ...

{
	// ...
	plugins: [
			new HtmlWebpackPlugin({
				title: "My Project",
			}),
	]
}

插件写入到配置对象的plugin数组中，并在该数组里实例化，其实这也可以看出，webpack的plugin本质上是一个类。

插件实例化时一般可以传入一个配置对象，具体的参数可以见该插件的文档。

注意 在webpack配置里使用loader时不需要导入对应的包，但是如果是webpack plugin就需要导入包并在plugins数组里实例化。