Cory is a Microsoft MVP in C#, founder of OutlierDeveloper.com, avid tech reader, and speaker.
He believes in clean code, pragmatic development, and responsive native UIs.
Also in this series:
Part 1 – You Need a Starter Kit
Part 2 – Editors and Configuration
Part 3 – Package Management
Part 4 – Development Web Server
Part 5 – Automation
Part 6 – Transpiling
Part 7 – Bundling
Part 8 – Linting
Part 9 – Testing and Continuous Integration
Part 10 – HTTP Calls
Part 11 – Project Structure
Part 12 – Production Build
Part 13 – Production Deploy
There are 5 module formats to choose from:
Asynchronous Module Definition (AMD)
Universal Module Definition (UMD)
Cory says Globals, IIFEs and AMD should be considered obsolete. Use CommonJS for Node, and ES6 Modules if you are using ES6.
Why ES6 Modules?
Cory explains the benefits of ES6 modules. They are Standardized and Statically analyzable. They are many features enabled by stically analyzable code. ES6 modules are also easy to read.
Choosing a Bundler
For further information on Require JS, see Require JS Dependency Injection and Module Loading.
Cory lists the following options as modern bundlers:
– Browserify (first bundler to reach mass adoption, bundling npm packages for the web)
– Webpack (bundles file types besides JS and has built in hot-reloading)
– Rollup (offers tree shaking to remove unused code, faster at loading production code)
– JSPM (uses SystemJS module loader and Rollup, can load modules at runtime)
Cory chooses webpack for this course, saying it offers hot module reloading, and bundle splitting so that users download different bundles for different sections of our apps.
To learn webpack with Joe Eames see Webpack fundamentals
Kent’s course also includes information on new advanced features.
78% of respondents to Cory’s poll say they are using Webpack.
Demo: Configuring Webpack
Webpack bundles all of our files together for our target environment. We create a webpack.config.dev.js file. You can find the code at bit.ly/2dSZwea and Cory describes all the settings here.
This is a basic webpack config. You can see a more sophisticated setup by watching his React and Redux course
Demo: Configure Webpack with Express
We open srcServer.js again and add imports for webpack and our config file. We then use ‘webpack-dev-middleware’.
Our demo app doesn’t do anything except say hello world at this point, so we fix this next.
Demo: Create App Entry Point
We create an index.js file with some code in it. When we run up the app in the console we see “I would pay $1,000.00 for this awesome course!”
We look at the bundle.js file that webpack has created for us and see that it is ES5 code. So Babel has done that for us.
Demo: Handling CSS with Webpack
We create an index.css file with a couple of styles, and import it into our index.js. We see that our Hello World! message now has a new font.
The transpiled and bundled JS code looks a whole lot different to what we actually wrote. How can we debug this?
Sourcemaps map code back to the original source, and they can be created as part of our build.
Demo: Debugging via Sourcemaps
In the demonstration Cory uses the devtool setting ‘inline-source-map’.
For details on the various sourcemap settings in WebPack see http://webpack.github.io/docs/configuration.html#devtool