Draft Webpack build pull request on WeVote

webpack_wevote.md

What github.com/wevote/WebApp/issues does this fix?

wevote/WebApp#757

Changes included this pull request?

Purpose

The purpose of this pull request is to refactor the build process for WebApp. WebApp currently uses gulp + browserify to build the source files. The primary product of this build process is the single bundle.js file which contains the app’s main javascript logic. The problem is that it can take over 2 minutes to generate this file. Even a small change to one file means that we must wait 2 minutes for the entire bundle.js to rebuild. With webpack, we have reduced the build time down to less than 70 seconds (initial build) & 3 seconds (hot reload) (using weback’s hot-rebuilding capabilities).

Introduced webpack with docs

Gulp task: compile-bootstrap, sass -> compile sass into css Webpack: style-loader, css-loader, sass-loader -> import sass in js file, compile sass into css and inject a <style> tag

Gulp task: Copy-font -> move all fonts file into build/fonts Webpack: file-loader -> The file-loader resolves import/require() on a file into a url and emits the file into the output directory.

Gulp task: copy-img -> move all images into build/images Webpack: Done by file-loader New ways to import images: Import images as variables and use variable in jsx See example: https://github.com/wevote/WebApp/commit/7a1ce2acdf1a30336d7beeea3e6d7e35d946b444

Watchify is now replaced by Webpack hot reload

How to import image going forward (with example)

https://github.com/wevote/WebApp/commit/7a1ce2acdf1a30336d7beeea3e6d7e35d946b444

Build time comparison and hot reload time (with screenshot, benchmarking)

Initial build time with gulp:

WIth Webpack it's down to 76 seconds

Before webpack, one line changes would take > 1 minutes to rebuild

After webpack, one line changes would take < 5 seconds to rebuild

In other words, after making a change, webpack hot-rebuilds in 2.4 seconds whereas the old build process with gulp would have taken 84 seconds to rebuild. This represents a 35x improvement in build time.

Known issue: broken images and solution with reason not fixing at the moment

Note: since this project is moving fast and new images are added everyday, we can’t keep up with fixing all the images. We fixed majority of the images and would like to recommend merging this in after some testing to ensure no major problem and we can patch newly added images.

Testing Cordova build

Follow this instruction to test Cordova build https://github.com/wevote/WeVoteCordova#install-our-code-and-the-cordova-libraries However on the symlink part, since we no longer have fonts., css/ and javascript/, we just have to symlink index.html, bundle.js and img/.

rm bundle.js
ln -s /Users/your-username/MyProjects/WebApp/build/js/bundle.js bundle.js
rm index.html
ln -s /Users/your-username/MyProjects/WeVoteCordova/www/index.html index.html
ln -s /Users/your-username/MyProjects/WebApp/build/img img