我正在尝试自动化进入/ dist的资产。我有以下config.js：

module.exports = {
  context: __dirname + "/lib",
  entry: {
    main: [
      "./baa.ts"
    ]
  },
  output: {
    path: __dirname + "/dist",
    filename: "foo.js"
  },
  devtool: "source-map",
  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  },
  resolve: {
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  }
}

我还想在运行webpack时将/ lib旁边目录中的main.html包含到/ dist文件夹中。我怎样才能做到这一点？

更新1 2017_____________

我现在最喜欢的方法是将html-webpack-plugin模板文件与一起使用。也要感谢大家接受的答案！这种方式的优势在于，索引文件还将开箱即用地添加了cachbusted js链接！

选项1

在您的index.js文件（即webpack条目）中，index.html通过文件加载器插件向您添加需求，例如：

require('file-loader?name=[name].[ext]!../index.html');

使用webpack构建项目后，index.html将位于输出文件夹中。

选项2

使用html-webpack-plugin完全避免使用index.html。只需让webpack为您生成文件即可。

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

选项3

通过npm。如果通过npm运行命令，则可以将此设置添加到package.json中（也可以在此处检出webpack.config.js）。对于开发运行npm start，在这种情况下无需复制index.html，因为Web服务器将从源文件目录运行，并且bundle.js将在同一位置可用（bundle.js仅驻留在内存中，但是就像与index.html一起位于一样）。对于生产运行npm run build，dist文件夹将包含您的bundle.js，并使用良好的旧cp命令复制index.html，如下所示：

"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，images等直接包含在您的应用中，require并且webpack会为您提供该文件（好吧，在使用加载程序和可能的插件正确设置后）。

您可以使用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需求不需要成为捆绑软件的一部分，因此对于捆绑软件而言，这不是工作。

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

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文件）<script>由webpack 注入标签。可以配置最小化和更多选项，并在github上进行记录。

在Windows上可以正常使用：

1. npm install --save-dev copyfiles
2. 在package.json我有一个复制任务："copy": "copyfiles -u 1 ./app/index.html ./deploy"

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

如果只想使用index.html来扩展@hobbeshunter的答案，还可以使用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文件。main.js如果在webpack的conf文件中未指定其他名称，则似乎是捆绑软件的默认输出名称。我想这不是一个长期的好方法，但是我希望它可以帮助您了解Webpack的工作原理。