Webpack 如何将 index . Html 复制到 dist 文件夹

当使用Webpack进行项目构建时，通常我们需要将index.html这样的静态文件从源目录复制到输出的dist目录中。为了达到这一目的，我们可以使用名为html-webpack-plugin的插件，它不仅可以复制index.html文件，还能自动将打包后的JavaScript文件引入到该HTML文件中。

以下是如何使用这个插件的步骤：

1. 安装插件： 首先需要安装html-webpack-plugin。这可以通过npm或yarn来完成：

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

2. 配置Webpack： 在Webpack的配置文件（通常是webpack.config.js）中，引入插件并在plugins数组中添加一个新的HtmlWebpackPlugin实例。你可以在这个插件的构造函数中指定一些配置选项，例如模板文件的路径（template）：

   javascript
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // 其它配置...
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html' // 指向你的原始html文件路径
       })
     ]
     // 其它配置...
   };

3. 自定义配置： HtmlWebpackPlugin提供了许多可选的配置项，例如filename用来指定输出的HTML文件名，默认是index.html。如果你想改变输出文件的名称或路径，可以修改这个选项：

   javascript
   new HtmlWebpackPlugin({
     template: './src/index.html',
     filename: 'dist/index.html' // 输出的HTML文件路径
   })

通过这种方式，Webpack构建过程中会自动将指定的index.html复制到dist目录下，并且会将构建生成的JavaScript文件插入到这个HTML文件里。这样你就不需要手动编辑index.html文件来引入构建后的资源了。

这种方法不仅提高了开发效率，也避免了在更新JavaScript文件时忘记更新HTML文件引用的问题。