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

module.exports = {

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

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

}

要复制一个已经存在的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不需要成为捆绑包的一部分，因此这不是捆绑包的工作。

要扩展@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或文件或任何其他插件。

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

选项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'
    })
  ]
}

更多信息请参见文档。

我将在VitalyB的答案中添加一个选项:

选项3

Via npm. If you run your commands via npm, then you could add this setup to your package.json (check out also the webpack.config.js there too). For developing run npm start, no need to copy index.html in this case because the web server will be run from the source files directory, and the bundle.js will be available from the same place (the bundle.js will live in memory only but will available as if it was located together with index.html). For production run npm run build and a dist folder will contain your bundle.js and index.html gets copied with good old cp-command, as you can see below:

"scripts": {
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  }

更新:选项4

有一个copy-webpack-plugin，在这个Stackoverflow的答案中描述

但一般来说，除了非常“第一个”文件(如index.html)和更大的资产(如大图像或视频)，包括css, html，图像等直接在你的应用程序通过require和webpack将包括它为你(好吧，在你设置正确的加载器和可能的插件)。