Building Bootzooka UI with Webpack
Looks like best time of grunt and bower is gone. Moving to Webpack significantly reduces the configuration code one needs to write (compare
gruntfile.js (327 loc) +
bower.json(31 loc) vs
webpack.config.js (61 loc)). That change eliminates one factor - big files - of build system complexity.
For this change we got inspiration from egghead.io Webpack lessons.
What has changed?
- no grunt
- no bower
- ES2015 (plus import/export syntax)
- Webpack (also for unit tests)
Npm scripts now
We make use of npm scripts (instead of
- npm start - start hotreloading Webpack dev server
- npm run build - create a distribution
- npm run dist - create a distribution and serve with http-server
- npm run test - run karma unit tests
The biggest benefit we got with this change is the true modularity of angular webapp. Take a look at
components (this name moves us towards angular 2.0 future upgrade ;) directory. Each subdirectory is a complete component which might be copy&pasted to your own project and imported to main index.js (assuming you are using angular-ui) - it should work out of the box. Engaging isn’t it?