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

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

要扩展@hobbeshunter的答案，如果你只想要index.html，你也可以使用CopyPlugin， 使用这种方法而不是使用其他包的主要动机是，为每一种类型添加许多包并对其进行配置等是一场噩梦。 最简单的方法是使用CopyPlugin所有东西:

npm install copy-webpack-plugin --save-dev

然后

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin([
      { from: 'static', to: 'static' },
      { from: 'index.html', to: 'index.html', toType: 'file'},
    ]),
  ],
};

正如你所看到的，它复制了整个静态文件夹连同它的所有内容到dist文件夹。 不需要css或文件或任何其他插件。

虽然这种方法并不适用于所有的事情，但它可以简单而快速地完成工作。

我还发现把我的index.html文件放在dist/目录下，并将<script src='main.js'></script>添加到index.html中，以包括我绑定的webpack文件，这很简单，也很通用。如果在webpack的conf文件中没有指定其他的话，Main.js似乎是我们的bundle的默认输出名称。我想这不是一个好的和长期的解决方案，但我希望它能帮助理解webpack是如何工作的。

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

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

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

您可以直接将索引添加到条目配置中，并使用文件加载器来加载它

module.exports = {

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: {
    rules: [
      {
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      },
      .. other loaders
    ]
  }

}