In order to prevent this question being marked as duplicate, I want to mention that I have referred to a number of similar SO questions and tried the accepted/most upvoted answers, but those did not help:
-
What am I missing here?
CodePudding user response:
Your setup is correct; based on your filename settings in Webpack, your bundle is located at
http://localhost:8080/bundle.js
If you'd like to copy over an
index.html
file to serve the contents of your bundle, you may want to take a look atHtmlWebpackPlugin
here: https://webpack.js.org/plugins/html-webpack-plugin/CodePudding user response:
Thanks @dave-kiss for pointing in the right direction, the key idea being the use of HtmlWebpackPlugin and HtmlLoader.
I have committed the changes to the repository https://github.com/phalgunv/basic-rxjs-starter.git in the branch bug-fix-content-not-served for reference.
Here are the steps followed:
Install html-load
npm install --save-dev html-loader html-webpack-plugin
Update webpack.config.js modules->rules with html-loader
module: { rules: [ { test: /.tsx?$/, use: "ts-loader", exclude: /node_modules/, }, { test: /.html$/, loader: "html-loader", }, ], },
Update webpack.config.js with HtmlWebpackPlugin
plugins: [ new HtmlWebpackPlugin({ template: "src/index.html", }), ],
Remove
<script>
tag from index.html
Check the commit - https://github.com/phalgunv/basic-rxjs-starter/commit/15d0779614ccd0428bb47bc308bea8f7f0509ea0 for refernce.