Details about the automated build process, requirements and why I have chosen webpack.
I wanted the following from my build process:
- minification and obfuscation
- transpiling, both for scripts (typescript) and styles (sass)
- bundling
- image optimization
- removing unused code
- lazy loading of styles and scripts
In short - I went with webpack, which comes bundled with half of those things and plugins to handle the rest.
That’s basically the setup I am using as a base for all my projects, and modify as needed.
I won’t delve into some excrutiating details, you are welcome to take a look yourself on github.
Build config
When creating my build I was heavily inspired by the NY Studio’s 107 annotated config with few notable exceptions:
- I don’t need modern/legacy builds, I decided to cater only for newer browsers - something that I have longed to do for years
- I don’t need any HTML injection, which also means I handle critical path rendering and script loading myself
- I don’t use vue
- I don’t need HMR
- I use sass instead of modern-era css/postcss, which I still believe is a better option for now
- I like writing in typescript, even if it’s kindof wasted here
- I needed multiple entrypoints, one per page template to be exact
Main
I went with one entrypoint per page, globbing the source for them, manifest for nice cache-friendly files and few tools for more pleasant experience.
- glob-all to collect all entrypoints
- manifest-plugin to generate manifest so I can have cache-friendly filenames
- webpack-notifier so I get notice when build finishes - saves me from refreshing the page too much
- webpack-merge so I can keep my webpack configs separated
- bundle analyzer on switch when I need to debug the bundles
- clean plugin to erase the output dir
Full setup can be found on github
Styles
Nothing fancy, sass with extraction and minification
- based around mini-css-extract-plugin which allows me to have my styles as separate file, which helps with caching
- postcss-preset-env which handles the pesky details of browser-compatibility, similar to babel-preset-env
- sass-loader which loads my sass
- optimize-css-assets-plugin which runs minifier on extracted files, webpack by default does it only on chunks
Full setup can be found on github
Scripts
This one took some time to setup, I wanted to use babel glorious env preset AND write in typescript - needed some fiddling.
- babel-loader to transpile my typescript, using env and typescript preset to handle polyfills and compatibility
- terser-plugin to minify the code, seeing as uglify does not support newer ecmascript versions
- few plugins to allow some nice features: dynamic import syntax, class properties, object rest spread
Full setup can be found on github
Assets
The funny part here is I setup it ahead of time, being sure I will be using images - I don’t … yet
- plugins to minify basic assets, not used now but I plan to use some images in the future
- imageminGifsicle, imageminMozjpeg, imageminOptipng, imageminSvgo
Full setup can be found on github
Extending
In the future I am considering extending it: - media query splitting which would mean further reduction of unused styles, right now the styles here are small enough I don’t need it - workbox plugin obviously to use PWA features without hassle of writing service worker from scratch
For anyone interested how to setup your own webpack build I would suggest first looking at this article on medium it explains basics of webpack nicely.
Next article will be about the styling of the blog
