Webpack.config如何将index.html复制到dist文件夹

Question

我正在尝试自动将 Assets 放入/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 文件夹中。我怎样才能做到这一点？

2017 年更新 1_____________

我现在最喜欢的方法是使用 html-webpack-plugin带有模板文件。也感谢接受的答案!这种方式的优点是索引文件还将开箱即用地添加 cachbusted js 链接!

Answer 1

选项 1

在您的 index.js 文件(即 webpack 条目)中，通过 file-loader 添加一个 require 到您的 index.html插件，例如:

require('file-loader?name=[name].[ext]!../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'
    })
  ]
}

请参阅docs了解更多信息。