小编典典

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

all

我正在尝试自动化进入 /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 链接！

阅读 99

2022-06-20

共1个答案

小编典典

选项1

在您的文件（即 webpack 条目）中，向您的via file-loaderindex.js插件添加一个要求，例如：index.html

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

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

选项 2

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

在这种情况下，如果您想保留自己的index.html文件作为模板，您可以使用以下配置：

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

有关更多信息，请参阅文档。

2022-06-20