AGENDA

• Modules and Module Systems in Javascript
• Loaders and Bundlers
• Webpack historically
• Usage of Webpack
• Webpack extendability
• Recipes!
• Future

Modules

• High cohesion of functionality
  (Reusability is a side effect)
• Decoupling of dependencies
• Prevents global namespace conflicts(in javascript) 

Resources-

• Lin Clark on Modules in React Rally

A Javascript Module

Can be

• IIFE
• Commonjs
• AMD
• ES6 modules

Immediately Invoked Function Expressions and Module Pattern

Resources-

• Intro to IIFE
• More on module pattern

/* imports */

(function ($, YAHOO) {
	// now have access to globals 
        // jQuery (as $) and YAHOO in this code
}(jQuery, YAHOO));

/* exports */

var MODULE = (function () {
	var my = {},
		privateVariable = 1;

	function privateMethod() {
		// ...
	}

	my.moduleProperty = 1;
	my.moduleMethod = function () {
		// ...
	};

	return my;
}());

CommonJs

Resources-

• Curran Keller's screencast on Javascript modules

//loading module
var _ = require(‘lodash’);

//declaring module
module.exports = someValue;

AMD - Asynchronous Module Definition

define(‘myAwesomeLib’, [‘lodash’, ‘someDep’],
function (_, someDep) { 
   	return { … } 
	}
);

Resources-

• Addy Osmani on javascript modules
• RequireJs docs

ES6 modules

/* 
    export default denotes the main
    variable exported
*/

export default MyModule;

import MyModule from './MyModule';

/* named exports */

export subModule;

import {subModule} from './MyModule';

Loading vs Bundling

Module Bundling

• Identifies and resolves the dependency tree
• Concatenates files after above resolution
• Optimize by removing dead code/unused code
• Split code into separate bundles for conditional loading
• Minify/Uglify

Examples-

• Browserify
• Rollup
• Webpack
• JSPM

Build tooling historically speaking!

Webpack Origins

• Nodejs/CommonJs
• Npm
• RequireJs
• Browserify
• Grunt
• Gulp
• Webpack
• Rollup
• JSPM

Grunt/Gulp (Task runner)

module.exports = function(grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            projectFiles: {
                src: [
                    'js/*.js',
                    'js/modules/*/*.js',
                    'js/controllers/*.js',
                    'js/directives/*.js',
                    'js/factories/*.js',
                    'js/constants/*.js',
                    'js/filters/*.js'
                ],
                dest: 'dist/projectFiles.js'
            }
        },
        uglify: { dist: { options: { mangle: false },
                          files: { 'dist/projectFiles.min.js': 'dist/projectFiles.js'}}
        }
        
    });

    grunt.registerTask('default', ['concat:projectFiles', 'uglify']);
}

// grunt

Webpack instead...

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js',
		path: 'dist',
		publicPath: 'dist/'
	},
	module: {
		loaders: [{
			test: /\.js$/,
			excludes: /node_modules/,
			loader: 'babel-loader',
			query: {
				presets: ['es2015']
			}
		}, {
			test: /\.css$/,
			excludes: /node_modules/,
			loaders: ['style', 'css']
		}]
	},
	plugins:[
		new HtmlWebpackPlugin({
			template: 'assets/index.html',
			filename: '../index.html',
			inject: true
		})
	]
}

Introduction to webpack

Jargon update

• Chunks
• Bundler
• Loader
• Code splitting
• Entry point

Introduction to webpack

//moduleA
import React from 'react';
import moduleB from './moduleB';

//moduleB
import React from 'react';

// webpack moduleA bundle.js

Bundles React + moduleB + moduleA

Webpack configuration

webpack --config webpack.config.js

module.exports = {}

entry: './src/main.js'

entry: ['./src/main.js', './src/side.js']

output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'bundle.min.js'
}

Loaders

 module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader is used for ".jade" files

            { 
                test: /\.css$/, 
                loader: "style!css",
                exclude:/node_modules$/
            }
            // => "style" and "css" loader is used for ".css" files
        ]
    }

Extending webpack and plugins

Webpack code

Code from Html Webpack Plugin

Plugins!

plugins:[
		new HtmlWebpackPlugin({
			template: 'assets/index.html',
			filename: '../index.html',
			inject: true
		})
	]

Webpack in future

• Competition from browserify
• Rollup and integration with JSPM
• HTTP2

Webpack 2

• Native support for ES6 modules
• Loading ES6 modules async
• Dynamic expressions
• Tree shaking

??Questions??