Javascript 使用Web包构建index.html以与dev服务器一起使用

我使用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()
  ]
}

package.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与我的新index.html一起用于我的js文件，并在distfolder中使用自定义标记

问题：

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()
  ]
}

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

或者，是否有可能在建造过程中也得到一些利弗雷罗德

在我构建项目后，它会在我的文件夹中生成index.html和index.bundle。如果我删除index.bundle，项目仍然可以工作。index.bundle到底做什么

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

---

谢谢

有关custom index.html和热重新加载的问题，至少

插件有一些配置，你可以添加模板

new HtmlWebPackPlugin({
  filename: 'index.html',
  template: './public/index.html',
}),

---

有关custom index.html和热重新加载的问题，请至少联系我们

插件有一些配置，你可以添加模板

new HtmlWebPackPlugin({
  filename: 'index.html',
  template: './public/index.html',
}),