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

问题描述

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

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

问题：

1. 在dist文件夹中创建更改并不正确。如何直接从源代码生成index.html？我想这也许可以解决我所有使用自定义index.html来运行dev服务器的问题。
2. 或者还有可能获得一些Livereload用于构建吗？
3. 建立项目后，它会在我的distfolder中生成index.html和index.bundle。如果我删除index.bundle，则该项目仍然有效。 index.bundle到底是做什么的？

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

谢谢！

解决方法

至少对自定义index.html和热重装有疑问。

该插件具有一些可添加以用于模板化的配置。

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