webpack— Plugins

什么是plugin?

plugin 可以在 webpack 运行到某个时刻的时候，帮你做一些事情。 使用 plugins 可以让打包更便捷。

常用的plugin：

• HtmlWebpackPlugin
• CleanWebpackPlugin

1. HtmlWebpackPlugin

作用

HtmlWebpackPlugin会在打包结束后，(以template文件为模板)自动生成一个html文件，并把打包生成的js自动引入到这个html文件中。 —— 简化了HTML文件的创建。

如果您有多个webpack入口点，它们都将包含在生成的HTML中的<script>标记中。

2. CleanWebpackPlugin

作用

在webpack打包之前，先帮助我们清理我们设置好的文件目录。

2个插件的代码示例

先下载：

cnpm install html-webpack-plugin --save-dev
cnpm install clean-webpack-plugin --save-dev

使用：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "./src/index.html"// 以index.html文件为模板
    })
  ]
};

流程小结【熟悉】

1. 在webpack打包流程之前执行CleanWebpackPlugin，清理设置的dist目录；
2. 然后进入打包环节；
3. 打包结束之后，再执行HtmlWebpackPlugin插件，生成index.html,并把打包生成的js自动引入到这个html文件中。

具体查看官方地址《CleanWebpackPlugin》
具体查看官方地址《HtmlWebpackPlugin》

推荐阅读本文内容的官方文档《Output Management》