webpack.config 如何将 index.html 复制到 dist 文件夹 [英] Webpack.config how to just copy the index.html to the dist folder

问题描述

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

I am trying to automate assets going into /dist. I have the following 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 文件夹中.我该怎么做?

I also want to include main.html from the directory that sits next to /lib, into the /dist folder when running webpack. How can I do this?

我现在最喜欢的方法是使用 html-webpack-plugin 带有模板文件.也感谢接受的答案！这种方式的好处是索引文件也会有开箱即用的cachbusted js链接！

My favourite way to do this now is to use the html-webpack-plugin with a template file. Thanks to the accepted answer too! The advantage of this way is that the index file will also have the cachbusted js link added out of the box!

推荐答案

选项 1

在您的 index.js 文件(即 webpack 条目)中，通过 file-loader 插件，例如:

In your index.js file (i.e. webpack entry) add a require to your index.html via file-loader plugin, e.g.:

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

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

Once you build your project with webpack, index.html will be in the output folder.

选项 2

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

Use html-webpack-plugin to avoid having an index.html at all. Simply have webpack generate the file for you.

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

In this case if you want to keep your own index.html file as template, you may use this configuration:

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

查看文档更多信息.

这篇关于webpack.config 如何将 index.html 复制到 dist 文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！