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,225