HtmlWebpackPlugin作用

当我们更改了我们的一个entry入口起点的名称，甚至添加了一个新的入口，会发生什么？

会在构建时重新命名生成的 bundle，但是我们的 index.html 文件仍然引用旧的名称。

此时就可以用 HtmlWebpackPlugin 来解决这个问题。

在我们构建之前，虽然在 dist/ 文件夹我们已经有了 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成它自己的 index.html 文件，所有的 bundle 会自动添加到 html 中。

也就是说，它会用新生成的 index.html 文件，替换我们的原有文件。

  plugins: [
    new HtmlWebpackPlugin({
    }),
  ],

 

延伸:

清理 /dist 文件夹

npm run build时，遗留了之前的指南和代码示例，/dist 文件夹显得相当杂乱。

webpack 将生成文件并放置在 /dist 文件夹中，但是它不会追踪哪些文件是实际在项目中用到的。

比较推荐的做法是，在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。

使用 output.clean 配置项实现这个需求。

output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
    clean: true,
   },