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

Question

Im using webpack for running my Three.js application with the following configuration in the webpack.config file:

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"
  },

With the HtmlWebpackPlugin it autogenerates the html for me. But since I want to create a custom html index file with some new tags this doesnt work for me. So I build the project

npm run-script build

and runs the index.html in the dist folder manually with my applied edits and everything works.

If I remove the HtmlWebpackPlugin from the webpack.config and build the project again and then run:

npm start

livereload works for my js files together with my new index.html with custom tags in the distfolder.

Questions:

1. It doesnt feels correct to create the changes in the dist folder. How can I generate a index.html straight from source? I guess that might solve all my problems being able to run dev server with a custom index.html
2. Or is it possible to get some livereload for the build as well?
3. after I have built my project it generates index.html and index.bundle in my distfolder. If I remove the index.bundle the project works anyway. What exactly does index.bundle do?

What is the best approach or do I need to build my project each time Im doing an update in my index file?

Thanks!

Answer 1

For questions regarding custom index.html and hot-reloading at least.

The plugin has some config you can add for templating.

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