docs: update ZURB template JavaScript docs #10353

Changes:
* Add infos about webpack
* Add infos about Babel
* Update recommended import process
* Change list of useful resources

Closes https://github.com/zurb/foundation-sites/issues/10353

diff --git a/docs/pages/starter-projects.md b/docs/pages/starter-projects.md
index 65bdf8575622f8684cb5de693e9bc2578a0031cc..90420970d87f0ae4cc6f0a7dbeba3a10aa2f3007 100644 (file)
--- a/docs/pages/starter-projects.md
+++ b/docs/pages/starter-projects.md
@@ -101,12 +101,16 @@ Here's an overview of what the ZURB Template can do:
 
 * **JavaScript Compilation**
 
-  All JavaScript files in the `src/assets/js` folder, along with Foundation and its dependencies, are bundled into one file called `app.js`. The files are imported using module dependency with [webpack](https://webpack.js.org/) as the module bundler.
-
-  If you're unfamiliar with modules and module bundling, check out [this resource for node style require/exports](http://openmymind.net/2012/2/3/Node-Require-and-Exports/) and [this resource to understand ES6 modules](http://exploringjs.com/es6/ch_modules.html)
+  Javascript is transpiled using and [Babel](https://babeljs.io) (with the [es2015 plugin](https://babeljs.io/docs/plugins/#es2015)) so you can use [ES2015 features](https://babeljs.io/learn-es2015/).
+  The main Js file is under `src/assets/js/app.js`, and imports Foundation, jQuery and whatInput. You can import there installed packages and custom files, they will be included in the build.
 
   A source map is created that maps back to the original files. By default, the bundled `app.js` is uncompressed. When building for production, the file is run through [UglifyJS](https://github.com/mishoo/UglifyJS) for compression.
 
+  The whole bundling process is handled by [WebPack](https://webpack.js.org): it manages all assets and dependencies for you and compile them into one single file. If you're unfamiliar with imports or module bundling, check out:
+  * [What are ES6 imports](http://2ality.com/2014/09/es6-modules-final.html)
+  * [Beginner’s guide to Webpack](https://medium.com/javascript-training/beginner-s-guide-to-webpack-b1f1a3638460)
+  * [Beginner’s guide to Javascript Modules](https://medium.freecodecamp.org/javascript-modules-a-beginner-s-guide-783f7d7a5fcc).
+
 * **Image Compression**
 
   By default, all images are copied as-is from `assets/img` to your `dist` folder. When building for production, images are run through [gulp-imagemin](https://github.com/sindresorhus/gulp-imagemin) for compression. The plugin supports JPEG, PNG, SVG, and GIF files.