When does the webpack bundle occur?

Question

I am learning Es6 modules at this current time, it took me so long to finally understand and be proficient in closures, IIFE's and scope using one script that I was almost upset to find ES6 modules bring about a different, more manageable way to organise modular code into various different scripts and then for a bundler like Webpack to bundle it all back into one ( or only a few ) scripts.

1. I get the normal cross origin error when I put script type = 'module' and try to run modules on my local file system which is different to when I run a normal script just simply specifying a src!

Wherever I look the solution is to use a local host to get round this which I have done? But at what point does Webpack work it's bundling? Is it when I run it in the command line or when it's loaded into the browser?

2. If installing webpack via npm in my project and setting up the config does this mean I wouldn't have to use a local host because my distribution code during the runtime is now in one script file so doesn't have to import scripts not on the same url? I know it's only on my local file system but I cannot request scripts in the same folder when using es6 modules due to the cross origin policy as I could if just specifying a script src without using modules.

Answer 1

Each time I run Webpack from the command line it bundles together the latest code taken from the entry point ( specified during my config). This means I can use the ES6 module syntax on my entry file without having to use a live server as I never intend to load this js entry file into the browser, it's simply to be the controller of all other script exports by importing what I need from them. Then this script will be the target of Webpacks bundling ( the entry point) meaning the only script that is loaded into the browser is the bundled script, which has no other imports. This avoids the need to run a live server when testing ES6 modules.. If not using Webpack I would have to run a server because my main script would be importing other scripts and unless they have the same url ( they don't even have one yet in my file system) then I will get a cross origin error. As soon as I run my local server 127.0.0.1 then it would work. I prefer testing with Webpack.