Webpack：配置插件(plugins)

plugins

Plugin 用于扩展 Webpack 功能，各种各样的 Plugin 几乎让 Webpack 可以做任何构建相关的事情
在webpack中，loader 用于对模块的源代码进行转换。而插件目的在于解决 loader 无法实现的其他事。插件并不直接操作单个模块，它直接对整个构建过程其作用

使用 Plugin 的难点在于掌握 Plugin 本身提供的配置项，而不是如何在 Webpack 中接入 Plugin

几乎所有 Webpack 无法直接实现的功能都能在社区找到开源的 Plugin 去解决，你需要善于使用搜索引擎去寻找解决问题的方法。

使用插件的方法

1. 通过cnpm安装插件
2. 通过require导入插件
3. 在webpack的配置文件中进行配置使用

插件使用实例

这里以HtmlWebpackPlugin插件的使用为例，这个插件的作用是依据一个简单的模板，帮助生成最终的Html5文件，这个文件中会自动引用了打包后的JS文件（其他文件如果有的话也会被引入）

安装：

cnpm i html-webpack-plugin -D

导入：

const HtmlWebpackPlugin = require('html-webpack-plugin'); 

写入配置文件：

//下面的配置表示以根目录下src/template.html文件为模板,在输出目录生成一个index.html文件，并且这个文件会自动导入最终生成的js文件

plugins: [
new HtmlWebpackPlugin({ 
template: path.resolve(__dirname, 'src/template.html') }) 
]

正式使用： 执行打包命令即可