Using webpack to run my Three.js application, I have 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"
},
The HtmlWebpackPlugin autogenerates html for me. However, since I want to create a custom html index file with some new tags, this approach doesn't work for me. So, I build the project:
npm run-script build
and manually run the index.html in the dist folder with my edits applied, and everything works.
If I remove the HtmlWebpackPlugin from the webpack.config, rebuild the project, and then run:
npm start
livereload works for my js files along with my new index.html with custom tags in the dist folder.
Questions:
- It doesn't feel right to make changes in the dist folder. How can I generate an index.html straight from the source? This might solve all my issues of running dev server with a custom index.html.
- Is it possible to get livereload for the build as well?
- After building my project, it generates index.html and index.bundle in the dist folder. If I remove index.bundle, the project still works. What exactly does index.bundle do?
What is the best approach, or do I need to build my project every time I update my index file?
Thank you!