Menu
I have built my application with webpack merging all css into one file, all js into one file and having one html for my SPA app.
When I do my testing with webpagetest most of my issues is not with loading the files but loading them as individual files.
html+css+js=index.html
How do I pack my html, css and js into a single index.html, so I can avoid http overhead?
Webpack or any webpack plugin is better, since we are already using it.
Thanks for any direction on this.
408
By default, Webpack will inline your CSS as Javascript tags that injects the CSS into the page. This sounds strange but it lets you do hot reloading in development. In production you extract them to a file using the ExtractTextPlugin, and require it with a normal link tag.
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
I use html-webpack-plugin inject the output from Webpack into a index.html file.
Assuming you mean you want to inline all those files into one http request of index.html you can use html-webpack-inline-source-plugin to achieve this.
190
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
