简介

插件是webpack的一个核心部分，我们通过插件能帮助webpack执行一些特定的任务，例如：打包优化，资源管理等，下面是官方的解释：

插件是 webpack 生态的关键部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。 插件能够 hook 到每一个编译(compilation)中发出的关键事件中。 在编译的每个阶段中，插件都拥有对 compiler 对象的完全访问能力， 并且在合适的时机，还可以访问当前的 compilation 对象

webpack官方文档内有三组插件：
（1）Community 社区插件
（2）Webpack 官方插件
（3）Webpack Contrib 第三方插件

1.HtmlWebpackPlugin

这个插件可以让我们在打包的时候，连同html文件一起打包，不仅仅只打包JS文件。
HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader。

安装

npm install —save-dev html-webpack-plugin

基本用法

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. const path = require('path');
  4. module.exports = {
  5.   // mode：打包的模式
  6.   mode: 'development',
  8.   // entry: 我们的入口文件，要打包的文件
  9.   entry: './src/index.js',
  11.   // output：出口文件，打包好之后的文件
  12.   // -filename：文件名
  13.   // -path：文件所在的绝对路径
  14.   // --path.resolve(__dirname)获取到 webpack.config.js的物理路径
  15.   output: {
  16.     filename: 'bundle.js',
  17.     path: path.resolve(__dirname, './dist'),
  18.     // 在生成文件之前清空 output 目录
  19.     clean: true,
  20.     // assetModuleFilename控制输出文件的文件名，还能指定目录（优先级低于generator）
  21.     // [contenthash]：webpack自带的 自动生成名字
  22.     // [ext]：webpack自带的 保留源文件扩展名
  23.     assetModuleFilename: 'images/[contenthash][ext]'
  24.   },
  26.   // 此选项控制是否生成，以及如何生成 source map。
  27.   // inline-source-map: source map 转换为 DataUrl 后添加到 bundle 中。
  28.   devtool: 'inline-source-map',
  30.   // plugins插件
  31.   plugins: [
  32.     new HtmlWebpackPulgin({
  33.       // html的模板
  34.       template: './index.html',
  35.       // 导出html文件的名字
  36.       filename: 'app.html',
  37.       // 让 js 文件在 body标签 内被引入
  38.       inject: 'body'
  39.     })
  40.   ]
  41. }

当我们配置好之后，再通过npx webpack 打包
image.png
dist文件夹内不仅出现了bundle.js，还出现了app.html文件

这就是我们刚刚设置的HtmlWebpackPlugin的作用，可以帮助我们导出html文件，不需要我们将打包后的JS文件再导入index.html内了，并且还能通过 inject 让 js 文件在 body标签 内被引入