webpack-中的插件plugin

jiezi

5 年前

webpack 中的插件（plugin）在打包过程中运行到某个时刻的时候，会帮助你做一些事情。

在之前的 demo 中，打包后的 dist 目录中的 index.html 是我们手动添加进去的，里面使用 <script> 引入 main.js 文件也是手写的，这是非常不方便的，此时就可以使用 HtmlWebpackPlugin 帮助我们解决这个问题了。

这个插件的作用就是生成一个 HTML 文件，该 HTML 文件里自动地就包含了 <script> 标签加载入口文件。

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

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'src/index.js',
  // ...
  plugins: [new HtmlWebpackPlugin()
  ]
}

执行命令打包，可以看到 dist 目录下就生成了一个 index.html 文件，里面的内容是这样的：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

但是问题又来了，生成的 index.html 缺少了一些内容，比如 <div id="root">root</div>，这里可以使用该插件的一些配置来实现。

// webpack.config.js

plugins: [
  new HtmlWebpackPlugin({template: 'src/index.html'})
]

上面使用了 template 选项，那么最终打包生成的 dist/index.html 就是以 src/index.html 为模板来生成的。

更多的配置选项查阅 html-webpack-plugin#options。

这个插件的作用是删除 webpack 输出目录，比如打包生成的是 dist 目录，那么这个插件就会把 dist 目录删除掉。

npm install --save-dev clean-webpack-plugin

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry: 'src/index.js',
  // ...
  plugins: [
    new CleanWebpackPlugin({verbose: true}),
    new HtmlWebpackPlugin()]
}

使用 CleanWebpackPlugin 时设置了 verbose 选项为 true，它的作用是在控制台中输出日志。

执行打包命令（假设之前已经打包生成了 dist 目录），可以看到控制台输出了以下内容：

clean-webpack-plugin: removed dist\bundle.js
clean-webpack-plugin: removed dist\index.html
Hash: 99aed0b5824ba9a08cca
Version: webpack 4.40.2
Time: 407ms
Built at: 2019-10-28 21:18:02
     Asset       Size  Chunks             Chunk Names
 bundle.js   3.83 KiB    main  [emitted]  main
index.html  222 bytes          [emitted]
Entrypoint main = bundle.js
[./src/index.js] 59 bytes {main} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 378 bytes {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 1 hidden module

可以看到，webpack 先执行了 clean-webpack-plugin 插件，将 dist/bundle.js 和 dist/index.html 删除，然后进行打包，最后执行 html-webpack-plugin 插件生成 index.html 文件（也就是不同的插件是会在 webpack 打包过程中的不同时刻执行的）。

更多内容查阅 clean-webpack-plugin。

webpack-中的插件plugin

1. 概念

2. HtmlWebpackPlugin

2.1 使用方式

2.2 配置

3. CleanWebpackPlugin

3.1 使用