This is a quick, on demand and yet unedited/untested guide how to set up webpack build system (in the moment you drop gulp on when you haven't used any building/packing system before).
Originally this was written in times when webpack just came out and documentation, both official as well as users', was sparse and bad. Now there are many excellent Hello World as well as in in-depth tutorials on webpack. Many projects offer boilerplates to study from. But I try to keep this up to date anyways.
Put together by @kroko for the new colleagues that see webpack for the first time. However I tried to formulate things in a way so that other random readers may also benefit.
While doing edits I realised that notes should be made for some basic npm stuff as the reality is - there are people who haven't used any building tools or even npm before (not-Node.js backend guys - PHP/ROR/... - leaning towards full stack of frontend), but want to jump in webpack. So this assumes entry level knowledge in Node/NPM.
- OS requirements
- Directory structure
- npm
- Server side
- First build of JavaScript
- Webpack mode, deploy tiers and environments (
NODE_ENV) - JavaScript modules and webpack resolve alias
- Minimise JavaScript with custom options
- Copy files to destination without compiling
- First build of SCSS/CSS
- Scope hoisting
- Define plugin
- npm scripts
- PostCSS
- Bootstrapping CSS with normalize.css
- CSS source maps
- Making SCSS tier aware
- File loading
- Image compressing
- Font loading (example for old bulletproof syntax)
- Custom
properties.json(helper) file - webpack DevServer setup
- CORS
- making it hot
- HTML building
- Cache busting by using hashes
- Inline manually managed files into HTML
- Minify HTML including inlined code
- Short explanation what Babel does
- Installing Babel
- Core
- preset-env
- babelrc
- Babel loader
- Module system and Tree Shaking
- Babel polyfill and browserslist
- Babel plugins
- Other polyfills
- Shims
- ESLint
- JavaScript Standard Style with ;
- Stylelint
- Analysing the built products
- The issue that code splitting solves
- Code splitting setup
- Different approaches - common, vendor a.o. chunks
- Chunk naming
- Lazy loading
- Runtime (webpack Manifest)
- Inlining Runtime
- Serverside and TLS
- Valet or warp-serve-localhost
- Web App Manifest
- Service worker
- Test offline and Audit
- Preload links
- Preload async chunks
- As of writing webpack version is 4.41.5.
This tut has been tested on node 12.13.1 / npm 6.13.2.
Latest LTS, at least node version 8.x+, npm version 5.7.1+ (note that webpack 5 will drop support for node 8 and will support 10.13+)
- Expand on TTFMP stuff
- Expand on PWA stuff
- Discuss how webpack-dev-server can be launched via API