Webpack 4 Fundamentals
Why are we using Webpack and what problems does it solve? At its core, it’s a very simple tool in terms of its capabilities standalone.
Problems with Script Loading
But what are the problems with these things?
They don’t scale, you might have too many scripts, and each browser has bottlenecks. You could end up with unmaintainable scripts; scope, size, readability, fragility, monolithic files.
Immediately Invoked Function Expressions! Treat each file as an IIFE (Revealing Module Pattern). Using this pattern, you can now concatenate files without any concern of scope collision! This idea lead to the explosion of tools such as; Make, Grunt, Gulp, Broccoli, Brunch, StealJS. All of which are used to concatenate JS files.
But there are still problems… Full rebuilds everytime. Dead code (code you are not using). Lots of IIFEs are slow. No way to lazy load.
History of Modules
NPM + Node + Modules
NPM was created as a package registry to share JS modules across the registry.
There is no browser support for CommonJS, there are no live-bindings which causes problems with circular references, it’s slow…
The solution to this is to use bundlers / linkers. Browserify, RequireJS, SystemJS. The bundlers are used to write CommonJS modules and use them in your code.
But there are still problems. THere is no static async or lazy loading.
EcmaScript Modules (ESM)
ES Modules is completely separate from ES 2015. ESM has named and default exports.
ESM brought reusable, encapsulated, organized, and convenient modules. The issues… ESM for Node.js? Incredibly slow in the browser.
There’s 3 ways that you can use Webpack.
The config - A Common.JS module that is an object which has a bunch of properties that define what Webpack should do with code.
Webpack CLI - Almost every single property in Webpack is bound to a CLI argument and parameter.
Node API - Neutrino is built with this.
Webpack is important for web performance, scalibility, and maintainability.
Webpack from Scratch
Using Webpack for the First Time
Start in branch
feature/01-fem-first-script. Looking at the package.json file, you will find a lot of dependencies. Run
npm install. Still in the package.json file, add the following:
Then in the CLI type:
npm run webpack and you will see the default Webpack CLI output and there isn’t even a config file yet!
Adding npm Scripts for ENvironment Builds
In the output, there should be a warning message that no ‘mode’ has been set. Click the link to learn more about Webpack ‘mode’(s) Now add ‘dev’ and ‘prod’ environment to the ‘scripts’ section from above:
Now in the CLI you can type
npm run dev or
npm run prod to trigger the Webpack build mode as needed. Webpack defaults to production. Development is a faster build, production is an optimized build. Time to debug.
git checkout feature/03-fem-debug-script