Grok Webpack You Must

I love it when a tool comes along that is a real game changer, and forces you to re-imagine how you work. I just spent the last few days getting Webpack 3.0 understood, and now I see why Angular has chosen it as a key part of their development workflow and toolchain. Webpack will become a standard part of any UI development project no matter which framework you choose. Now that Angular has embraced it, it will do the same thing that happened when it chose TypeScript, sending its popularity soaring.

For years I cobbled together a development web server and toolchain with grunt and various node.js scripts. Then I switched to npm scripts and eliminated grunt and their ecosystem of plugins which simplified but ultimately still left me building a lot by hand.

Webpack and webpack-dev-server replace your module loader (say system.js or require.js) and your bundler pipeline (say system.js builder or r.js) with an integrated tool that does it all. Instead of running your app off of a ./src directory and having a separate build tool to create your bundled ./dist, webpack-dev-server always runs off of ./dist and does intelligent bundling to keep the compilation / reload experience fast. Since I always previewed off of ./src and never took the time to do a real ./dist, this is a better workflow and will lead to less mistakes. Sourcemaps make debugging the actual produced build fast and easy.

Conceptually, two things must be understood, a module entry and exit point (the pipeline), and a config file that defines the pipeline rules for that pipe.

Then you run a command >webpack --config=webpack.config.ts , and in that config you "teach" webpack how to load, and bundle your code like .ts and .scss. But instead of a hodgepodge of copying files and managing dependencies outside the "module" in webpack world you "require all the things" in your ts. Conceptually your typescript module depends on ./main.scss, so import it there just like your .html templates.

This replaces dozens of tools before, but comes at the cost of wading through multiple plugins, and configurations. I felt so good getting rid of that in Grunt, but the truth is we need to get comfortable with black boxes doing heavy lifting for us. That is the big takeaway for me over the past month. The days of lovingly knowing each .js file are over. Node_modules is an enormous endless sea of shtuff. You have to teach webpack what parts you want, and let it pour through and bundle things based on declared dependencies. Give it up, the <script> kitty days are long gone, but this makes previous build pipelines look like tinker toys.

Webpack-dev-server layers on top of the webpack concept, adding serving / watching / browsersync capabilities in the SAME config file. This will replace tons of hand cobbled config and proprietary stuff to maintain. Angular CLI builds even upon webpack-dev-server. This is why they gave up on System.js, it was too little too late, this need for an integrated module loader / bundler pipeline and dev environment is a new market that I didn't even know existed as one unified product until now.

Just prepare yourself for a hot mess of plugins and configuration, just going step by step and trying the webpack command and seeing what works and doesn't. There is a certain heat of competition around extensions in products like this which is daunting, but you will settle on some core ones and build from there. I highly recommend using a .ts based config file. Don't think "copy" think "bundle" and require all the things. After the dust settles you will be exercising that pipeline and be confident that your dist will work since you use it all day in development.

I believe Webpack will be a big piece for years until the module format and http2 tech is mainstream, and this will get us there in the meantime.