Migration to Webpack
User story: As a Fuel UI developer, I want to migrate to webpack from require.js, so that I can significantly improve my developer experience
Description:
Currently we use require.js module loader, AMD modules format and r.js build system. We've been using these technologies from the very beginning (more than 3 years ago!) and now they seems to be outdated and causing lots of problems to us. Here are some of them:
- Different approaches for nodejs and in-browser compilation of styles and JS - this doubles efforts to support them and doesn't guarantee that a change made in dev environment will work in production. Some transformations (like CSS-autoprefixer) are even not possible (or very hard to setup) in browser. Webpack uses single approach for every environment.
- Long in-browser compilation time. On my laptop I have to wait about 10-15 seconds after hitting F5 for loading and compilation. Webpack allows hot updates without refresh which take effect in 1-2 seconds.
- Inability to use original LESS styles from twitter bootstrap. With require.js we have to use precompiled CSS styles (attempting to load LESS styles directly results in extra 20s of compilation time). With webpack we can use original styles with minimal impact on performance.
- Limited ability to use NPM-delivered modules. Require.js has to rely on Bower for delivering in-browser modules, which results in having both versions (NPM and Bower) of many dependencies. Webpack allows us to ditch Bower.
- With require.js too granular modules may lead to longer loading times. Thus we currently try to put as many related stuff to a single module as possible, which has impact on unit-testing as we usually expose only 1 component from a module. Webpack will eliminate such limitation.
- ES2015 - webpack allows us to write code using ES2015 syntax and use ES2015 modules (official JS modules standard). It's hardly achievable with require.js - we have to use AMD and ES5.
Blueprint information
- Status:
- Complete
- Approver:
- Vitaly Kramskikh
- Priority:
- Medium
- Drafter:
- Vitaly Kramskikh
- Direction:
- Approved
- Assignee:
- Vitaly Kramskikh
- Definition:
- Approved
- Series goal:
- Accepted for 8.0.x
- Implementation:
- Implemented
- Milestone target:
- 8.0
- Started by
- Vitaly Kramskikh
- Completed by
- Vitaly Kramskikh
Related branches
Related bugs
Sprints
Whiteboard
Gerrit topic: https:/
Addressed by: https:/
Replace require.js loader/r.js builder with webpack
Gerrit topic: https:/
Addressed by: https:/
Karma test-runner intergration
Addressed by: https:/
Remove casperjs and phantomjs from dependencies
Addressed by: https:/
Blueprint: webpack
Addressed by: https:/
Explicitly enable webpack polling via watchOptions
Addressed by: https:/
Improve webpack integration