last day (18 days later) » 

17:07
1
A: How can I use multiple entries in Webpack alongside multiple HTML files in HtmlWebpackPlugin?

PlayMa256When you set: module.exports = { //... optimization: { runtimeChunk: true } }; It generates a runtime chunk. What is a runtime? Runtime is where ALL the code that webpack uses to load other files are. This is the heart of webpack when you run build. Since you have 2 separate bundle...

According to gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 , "optimization.runtimeChunk: true adds an additonal chunk to each entrypoint containing only the runtime.". You're saying "runtime" is webpack's code for loading files? Hmm. Adding runtimeChunk: true to optimization caused both the app and reset_password to not work
but did you add runtime to both of htmls? In the top of the file
Oh, no let me try that
``` new HtmlWebpackPlugin({ filename: 'index.html', template: 'public/html/ide.html', inject: true, chunks: ['app', 'vendor', 'runtimeChunk'] }), new HtmlWebpackPlugin({ filename: 'reset_password.html', template: 'public/html/reset_password.html', inject: true, chunks: ['resetPassword', 'runtimeChunk'], }), ```
Still didn't work. I'm building right now with profile enabled, to see what the name of the chunks are. One moment.
manually add them in order to test, you don't need to bundle them everytime
You mean put like <script src="runtimeChunk.js"> into the html files?
17:07
Yes, of course, why not?
Ah, hold on, in the bundle, looks like they're named runtime~app and runtime~reset_password. And I shouldn't do it manually because I need to deploy this to jenkins and other people's computers, for one thing lol. But I appreciate your help so far, this will likely be the correct answer.
You don't need to do that manually all the time... do that just for the sake of testing... when you figure out if it works you do that correctly.
So, manual testing I believe is unecessary. With your recommendation, I added runtime-app to and runtime-~reset_password to each of the HtmlWebpackPlugin places. Now, app works (root url), however, /reset_password.html still does not run javascript. The reason manually testing is unecessary is I can properly see both javascript files injected in the html in the inspector: <script type="text/javascript" src="/runtime~resetPassword.js"></script><script type="text/javascript" src="/resetPassword.js"></script>
i believe there are some dependencies on resetPassword.js right? Some node_modules dependencies
Hello
Thanks so much for your help so far - I'm convinced this is the right path. I'm actually on an airplane right now and it's about to take off, so I'll have to try more things in about two hours. I really appreciate your help so far.
17:17
No problem, i believe there are some dependencies on resetPassword.js right? Some node_modules dependencies
Reset password.js will eventually have dependencies, but right now it's an empty js file with a single console.log
oh...
that is even weirder...
Hence why I was confused why including vendor.js made it worl
Work*. It's all through webpack dev server for now so on second thought, maybe that depends on some files in node_modules...
let me try to do a local test...
hold on
I'll need to test the built files , maybe serve them through pytbonsimpleserver or something
Ok cheers.
It's a huge app so there could also be some random other thing blocking. I'll investigate while I'm offline as well. You're being very generous with your time and energy, and I appreciate that
17:21
i'll leave a message here if i find something
Cheers, taking off now, thanks so much again
17:35
i did the exactly same process. The only thing is that i tested manually. My runtime-chunk was at the top of the file on both files, one file had no vendors.js and both were working
just double check the order of those imports
script tags*

  last day (18 days later) »