要扩展@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是如何工作的。

要复制一个已经存在的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上。

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

module.exports = {

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

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

}

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

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

我想说的答案是:你不能。(或者至少:你不应该这么做)。这不是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不需要成为捆绑包的一部分，因此这不是捆绑包的工作。