Scribd
Upload
80 views

Webpack: Module Bundler

Webpack is a module bundler that analyzes a project's structure and dependencies to bundle assets for the browser. It analyzes the entire project rather than looking in specific paths like other build tools. Loaders allow preprocessing files and plugins extend functionality. Code splitting allows splitting code into chunks loaded on demand to reduce the initial download size. Optimization techniques include minimizing, deduplicating, and using common chunks.

Uploaded by

Aman Garg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

Webpack: Module Bundler

Webpack is a module bundler that analyzes a project's structure and dependencies to bundle assets for the browser. It analyzes the entire project rather than looking in specific paths like other build tools. Loaders allow preprocessing files and plugins extend functionality. Code splitting allows splitting code into chunks loaded on demand to reduce the initial download size. Optimization techniques include minimizing, deduplicating, and using common chunks.

Uploaded by

Aman Garg
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

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

You might also like