Webpack中文：
plugin | webpack 中文文档

在之前在npm run build编译后就会生成一个dist的文件夹，但是我们发现里面并没有index.html的文件，还得我们手动创建一个index.html的文件夹，利用plugins就可以自动实现创建这个过程。 :::info 一般src文件夹的代码称「源代码」，Webpack打包src后的代码为dist「产出」的代码，可以直接运行在浏览器中。 :::

那什么是plugins? :::info **plugin**可以在**Webpack**运行到某个时刻的时候，帮你做一些事情。 :::

html-webpack-plugin

HtmlWebpackPlugin | webpack 中文文档
html-webpack-plugin 会在打包结束后会自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中。

安装：

  1. $ npm install html-webpack-plugin -D


配置：

  1. // 引用node下的模块
  2. const path = require("path")
  3. // 引用插件
  4. const HtmlWebpackPlugin = require("html-webpack-plugin");
  6. module.exports = {
  7.   entry: "./src/index.js",
  8.   output: {
  9.     path: path.resolve(__dirname, "dist")
  10.   },
  11.   // loader(当你打包一个模块的时候就到这里查询相应的规则)
  12.   module: {
  13.     rules: [{
  14.       test: /\.jpg$/,
  15.       use: {
  16.         loader: "url-loader",
  17.         options: {
  18.           limit: 2048
  19.         }
  20.       }
  21.     }, {
  22.       test: /\.scss$/,
  23.       use: [
  24.         "style-loader", 
  25.         {
  26.           loader: "css-loader",
  27.           options: {
  28.             importLoaders: 2,
  29.             modules: true
  30.           }
  31.         }, 
  32.         "sass-loader", 
  33.         "postcss-loader"
  34.       ]
  35.     }]
  36.   },
  37.   // 配置插件
  38.   plugins: [
  39.     new HtmlWebpackPlugin({
  40.       // 指定一个html文件为 HtmlWebpackPlugin 生成 html 文件的模板
  41.       template: "./src/index.html"  
  42.     })]
  43. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div id="app">这是DIV元素</div>
  11.   </body>
  12. </html>

在我们编译后生成的dist文件夹中就会有index.html的文件，且这个文件内自动使用了我们模版index里面的内容也自动加载了打包后的JS文件。

clean-webpack-plugin

GitHub - johnagan/clean-webpack-plugin: A webpack plugin to remove your build folder(s) before building

这是一个非官方的plugin。
clean-webpack-plugin会在打包前将dist目录中的文件全部删除，这样可以防止存在冗余的文件。

安装：

  1. $ npm install clean-webpack-plugin -D

配置：

  1. // 引用插件
  2. const HtmlWebpackPlugin = require("html-webpack-plugin")
  3. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5. module.exports = {
  6.   // ...
  7.   plugins: [
  8.     // 进行实例化
  9.     new HtmlWebpackPlugin({
  10.       template: "./src/index.html"
  11.     }),
  12.     new CleanWebpackPlugin()
  13.   ]
  14. }