Summary
Webpack transforms and bundles
JavaScript classes into modules for use in a browser.
Notes
- During my experiments with vanilla JavaScript, I used a PHP script as an extremely simplified JavaScript bundler (i.e. it copied the contents of all the individual class files into one file and surrounded it in a module specification).
- At a crude level, Webpack is doing just that, combining all of the many JavaScript class files into one big bundle.js file that can be served up from your web server.
- However, Webpack is pretty sophisticated and can quickly become challenging. (I ended up doing an online class focused exclusively on it in order to get a handle on it.)
- It allows third-party libraries to be applied to the source code in order to transform it prior to bundling. For example, Babel can be applied to the transformation your Javascript into standard ES5. This allows you to code using more modern language features and syntax but still produce code that will be compatible with most browsers.
- It recognizes and manages dependencies to 3rd party libraries and only includes needed components in the bundle.js file
- It can also separate out your code (which is most likely to change) from vendor code (changes less frequently) and split them into two files bundle.js and vendor.js.
