使用 webpack 构建 index.html 以与开发服务器一起使用

Question

我使用 webpack 运行我的 Three.js 应用程序，在 webpack.config 文件中具有以下配置：

module.exports = {

  entry: `${__dirname}/src/tut15.js`,

  output: {

    path: __dirname + '/dist',

    filename: 'index_bundle.js'

  },

  devtool: 'inline-source-map',

  devServer: {

    contentBase: path.join(__dirname, 'dist'),

    compress: true,

    port: 9000

  },

  plugins: [

    new HtmlWebpackPlugin()

  ]

}

包.json

  "scripts": {

    "start": "webpack-dev-server --open",

    "build": "webpack --config webpack.config.babel.js",

    "test": "echo \"Error: no test specified\" && exit 1"

  },

使用HtmlWebpackPlugin它会为我自动生成 html。但是因为我想创建一个带有一些新标签的自定义 html 索引文件，所以这对我不起作用。所以我建立了这个项目

npm run-script build

并使用我应用的编辑手动运行 dist 文件夹中的 index.html，一切正常。

如果我从 webpack.config 中删除 HtmlWebpackPlugin 并再次构建项目然后运行：

npm start

livereload 适用于我的 js 文件以及我在 distfolder 中带有自定义标签的新 index.html。

问题：

1. 在 dist 文件夹中创建更改感觉不正确。如何直接从源代码生成 index.html？我想这可能会解决我能够使用自定义 index.html 运行开发服务器的所有问题

2. 或者是否也可以为构建获得一些 livereload？

3. 在我构建项目后，它会在我的 distfolder 中生成 index.html 和 index.bundle。如果我删除 index.bundle，该项目仍然有效。index.bundle 究竟做了什么？

什么是最好的方法，或者每次我在索引文件中进行更新时都需要构建我的项目？

谢谢！

Answer 1

至少关于自定义 index.html 和热重载的问题。该插件有一些配置，您可以为模板添加。new HtmlWebPackPlugin({  filename: 'index.html',  template: './public/index.html',}),