Webpack

Module Bundler

What is Webpack?

Webpack is a module bundler: A tool that can

analyze your project's structure, find JavaScript
modules and other assets to bundle and pack them
for the browser.

Comparison with build tools

Build tools such as Grunt and Gulp work by looking

into a defined path for files that match the
configuration. In the configuration file you also
specify the tasks and steps that should run to
transform, combine and/or minify each of these
files.

Webpack, instead, analyzes the project as a whole.

Given a starting main file, Webpack looks through
all of your project's dependencies (by following
require and import statements in JavaScript),
processes them and generates a bundled
JavaScript file.

Loaders

Loaders allow you to preprocess files as you require()

or load them.

Loaders can transform files from a different language

like, CoffeeScript to JavaScript, or inline images as
data URLs

require(style-loader!css-loader!less-loader!./mystyles.less");

When chaining loaders, they are applied right to left

(from the file, back)

Plugins

Webpack can be extended through plugins. In

Webpack, plugins have the ability to inject
themselves into the build process to introduce
custom behaviours.

Optimisation plugins:
OccurenceOrderPlugin,UglifyJsPlugin,
ExtractTextPlugin,CommonsChunkPlugin

http://webpack.github.io/docs/list-of-plugins.html

Sample Config

var
var
var
var
var

path = require("path");
webpack = require("webpack");
HtmlWebpackPlugin = require('html-webpack-plugin');
CleanWebpackPlugin = require('clean-webpack-plugin');
enviroment = require('./enviroment.js');

module.exports = {
entry: "./app.js",
output: {
publicPath: "minified/scripts/",
path: __dirname + "/minified/scripts/",
filename: "[name]-[chunkhash].js",
chunkname: "[name]-[chunkhash].js"
},
module: {
loaders: [
{
test: /\.js$/,
include: path.join(__dirname, '../'),
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015']
}
},
{
test: /\.less$/,
loader: "style!css!less"
},
{
test: /\.html$/,
loader: "handlebars-template-loader"
},
{
test: /\.(jpe|jpg|gif|woff|woff2|eot|ttf|svg|png)(\?.*$|$)/,
loader: 'url-loader?importLoaders=1&limit=100000'
},
{
test: /\.js/,
loader: 'imports?define=>false'
}
]
},

};

resolve: {
root: [
path.resolve(__dirname),
path.resolve('./modules'),
path.resolve('../apps/Listings'),
path.resolve('../')
],
alias: {
modules: enviroment.modules,
plugins: enviroment.plugins,
apps: enviroment.apps,
framework: enviroment.framework,
home: enviroment.home
},
extensions: ['', '.js']
},
plugins: [
new HtmlWebpackPlugin({
title: 'Brand Hub',
template: './index.ejs',
inject: 'body',
filename: '../../index.html'
}),
new CleanWebpackPlugin(['scripts'], {
root: enviroment.minified,
verbose: true,
dry: false
}),
new webpack.optimize.CommonsChunkPlugin({
name: "initializer",
minChunks: Infinity // disable automatic module selection
}),
new webpack.ProvidePlugin({
'window.jQuery': 'home/node_modules/jquery/dist/jquery.js',
'$': 'home/node_modules/jquery/dist/jquery.js' ,
'jQuery': 'home/node_modules/jquery/dist/jquery.js'
}),
new webpack.optimize.CommonsChunkPlugin({name:"main","async":true,'minChunk':2})
]

Code Splitting

Webpack has a feature to split your codebase into chunks which

are loaded on demand.

You can define split points in your code base. Webpack takes care
of the dependencies, output files and runtime stuff.

Code Splitting can be used to split code into an on demand

loaded chunk. This can keep the initial download small and
downloads code on demand when requested by the application.

require.ensure(dependencies, callback)

The require.ensure method ensures that every dependency in

dependencies can be synchronously required when calling the
callback. callback is called with the require function as parameter.

OPTIMIZATION

Minimize- To minimize your scripts (and your css, if you use the css-loader)
webpack supports a simple option:
--optimize-minimize resp. new webpack.optimize.UglifyJsPlugin()

Deduplication-This prevents the inclusion of duplicate code into your bundle and
instead applies a copy of the function at runtime. It doesnt affect semantics. You
can enable it with:
--optimize-dedupe resp. new webpack.optimize.DedupePlugin()

Chunks-
Limit the maximum chunk count with --optimize-max-chunks 15 new
webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})
Limit the minimum chunk size with --optimize-min-chunk-size 10000 new
webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})

CommonsChunkPlugin identifies common modules and put them into a commons

chunk

References

http://www.pro-react.com/materials/appendixA/

http://webpack.github.io/

https://medium.com/@matt.krick/a-productionready-realtime-saas-withwebpack-7b11ba2fa5b0#.c75jbpan8