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-
A Javascript Module
Can be
- IIFE
- Commonjs
- AMD
- ES6 modules
Immediately Invoked Function Expressions and Module Pattern
Resources-
/* 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
//loading module
var _ = require(‘lodash’);
//declaring module
module.exports = someValue;
AMD - Asynchronous Module Definition
define(‘myAwesomeLib’, [‘lodash’, ‘someDep’],
function (_, someDep) {
return { … }
}
);
Resources-
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??
Webpack Old
By Pavithra Kodmad
Webpack Old
- 992