Welcome to the new world! Webpack is a module bundler that is really modular and powerful. But first, you may ask, what's a module and what's a bundler?

In a typical web app, with multiple pages/sections to show the user, it doesn't always make sense to load the entire app in one js file and evaluate it on the browser. If the user is only going to look at their pictures, there is no need to show them analytics pages, or settings pages, so there is no need to download the code for those pages. Each of those pages can be considered modules. Basically anything you require(...) in the code is considered a module.

Webpack builds these different files into separable modules by building a static dependency tree at compilation time, and finding separable/common trees (chunks). And then it bundles each chunk into it's own js file that's ready to be served in a web page, or in our case, Photoshop.

Get to the point, how do I start developing in this new world?

Setting up development

• Type npm install and bower install to get all dependencies.
• RELEASE Type grunt compile to compile bundle for each locale into the build folder
• DEBUG Type grunt debug to compile English bundle, and keep watcher running that reacts to changes in any of the source files and rebuilds the correct module.

During development, you will want grunt debug running in a terminal in the background.

Build Process

grunt debug is not that different from grunt compile, except it doesn't uglify the code and keeps watchers alive for less files and source files.

What happens when you type grunt compile? These are the tasks Grunt runs:

["test", "clean:build", "i18n", "copy", "less", "webpack:compile", "uglify", "clean:i18n"]

• Test- Lints all the files
• clean:build - Deletes the build folder
• i18n - Concatenates all locale dictionaries, and merges them with English one for fallbacks
• copy - Copies index.html and all images to build folder
• less - Compiles the less files into a css file
• webpack:compile - Compiles/bundles the JS code
• uglify - Uglifies all the bundles. Currently, this takes about a minute for four files, reducing them from 6 MB to 2 MB
• clean:i18n - Cleans the built dictionaries

Changes made for this work

We have had multiple independent changes come in already to make this PR contained. And both Gruntfile.js and webpack.config.js contain a lot of comments with left to do tasks and description of different configurations used.

No more require.js

We've gotten rid of require.js completely. Webpack parses require calls made in the code during compile time to replace them with it's own method.

Prefixes on require statements removed

We have had prefixes such as text! i18n! jsx! that were used by requirejs to figure out how to parse those files. Webpack also uses such prefixes, but another way to achieve this is by setting loaders in webpack.config.js file. This provides a central location for rules of parsing non js files.

No i18n plugin

We take care of localization as a pre-compile step by concatenating all files in a locale folder and then merging them with the English dictionary as a fallback step. Then we compile the dictionary file into the bundle.

Clean up of JSON parsing

Webpack automatically calls JSON.parse on any required JSON file, loading it into the object.

Cleanup of nls folder

Due to Webpack parsing JSON files automatically, there are no more js files that just parse json files in the nls folders.

Work left To Do

• ES2015 support, currently, one of our linters fails with ES2015 code, so it needs to be updated
  • In the branch
• Completely ditch bower for npm, no more bower_components
  • This work is done in a separate branch (architecture/bower2npm), but will wait until webpack is in master
• Update React to latest, so it is bundled correctly
  • This work is also in architecture/bower2npm
• See if we gain anything from bundling up all the files in src/img into the bundle.
• Support LESS loader, instead of compiling them in a separate grunt task (https://christianalfoni.github.io/react-webpack-cookbook/Loading-LESS-or-SASS.html)
  • We used to load less in webpack as well.. However, this causes webpack to re-build less files for each locale, which is redundant work. Also, less-loader/css-loader for webpack has some issues with our file://shared links. [Barkin]