要复制一个已经存在的index.html文件到dist目录，你可以简单地使用HtmlWebpackPlugin，指定源index.html作为模板。

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [    
    new HtmlWebpackPlugin({
      template: './path/to/index.html',
    })
  ],
  // ...
};

创建的dist/index.html文件将基本上与您的源文件相同，不同的是。js文件等捆绑资源被webpack注入了<script>标记。缩小和进一步的选项可以配置，并记录在github上。

我想说的答案是:你不能。(或者至少:你不应该这么做)。这不是Webpack应该做的。Webpack是一个捆绑器，它不应该用于其他任务(在这种情况下:复制静态文件是另一个任务)。你应该使用像Grunt或Gulp这样的工具来完成这些任务。将Webpack集成为Grunt任务或Gulp任务是非常常见的。它们都有其他对复制文件有用的任务，例如，grunt-contrib-copy或gulp-copy。

对于其他资产(不是index.html)，你可以将它们与Webpack捆绑在一起(这正是Webpack的目的)。例如，var image = require('assets/my_image.png');。但我认为index.html不需要成为捆绑包的一部分，因此这不是捆绑包的工作。

选项1

在你的index.js文件(即webpack条目)中，通过文件加载器插件在index.html中添加一个require，例如:

require(“file-loader ? name = [name]。[请拨分机!’…- index . html);

一旦你用webpack构建了你的项目，index.html就会在输出文件夹中。

选项2

使用html-webpack-plugin来避免使用index.html。简单地让webpack为你生成文件。

在这种情况下，如果你想保留自己的index.html文件作为模板，你可以使用这样的配置:

const HtmlWebpackPlugin = require('html-webpack-plugin');

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

更多信息请参见文档。

你可以使用CopyWebpackPlugin。它是这样工作的:

module.exports = {
  plugins: [
    new CopyWebpackPlugin([{
      from: './*.html'
    }])
  ]
}

Webpack 5附带了资产模块，所以你不再需要任何复制插件或文件加载器

这在Windows上运行良好:

NPM install——save-dev copyfiles 在包中。我有一个复制任务:“复制”:“copyfiles -u 1 ./app/index.html ./deploy”

这将我的index.html从app文件夹移动到deploy文件夹。