AGENDA

I am..

PAVITHRA KODMAD

@pkodmad

 

MODULE SYSTEMS

Legos of your web application

Need an interface.

Javascript had no inbuilt support for module systems until ES6 modules.

MODULE SYSTEMS

Immediately Invoked Function Expression

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

	function privateMethod() {
		// ...
	}

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

	return my;
}());

MODULE SYSTEMS

CommonJs

//loading module
var myModule = require(‘../myModule’);

//declaring module
module.exports = myModule;

MODULE SYSTEMS

Asynchronous Module Definition

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

MODULE SYSTEMS

ES6 Modules

/* 
    export default denotes the main
    variable exported
*/

export default MyModule;

import MyModule from './MyModule';

/* named exports */

export subModule;

import {subModule} from './MyModule';

MODULE SYSTEMS

ES6 Modules

MODULE SYSTEMS

NodeJs (2009)

AMD (2011)

NPM (2011)

Browserify(2014)

Grunt (2013)

Gulp (2014)

Webmake (2011)

Webpack (2014)

WEBPACK

Is not a task runner

It is a module bundler with an ability to customise any part of it.

WEBPACK

WEBPACK

Everything is a module!

WEBPACK

   webpack entry.js bundle.js

WEBPACK

   webpack --config webpack.config.js

WEBPACK

var path = require('path');

module.exports = {
  context: __dirname,
  entry: './main.js',

  output: {
    path: path.resolve(__dirname, '../dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  module:{
    loaders: [{
	test: /\.js$/,
	loader:'babel',
	query: {
	    presets: ['es2015']
	},
	excludes: /node_modules$/
    }]
  }
}

WEBPACK

Everything is a module!

WEBPACK

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

WEBPACK

JARGON UPDATE

Plugins!!

Help customise and extend webpack behaviour

WEBPACK

WEBPACK

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

WEBPACK

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

WEBPACK

Compared

  • Browserify
  • Rollup
  • JSPM

Webpack Unpacked

By Pavithra Kodmad

Webpack Unpacked

  • 1,212