Building Bootzooka UI with Webpack19 April 2016 | Jan Kowalski & Marcin Baraniecki
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?