Webpack

Introduction to Webpack
Anjali Chawla
Software Dev, Expedia

What is webpack?
• Webpack is a module bundler. It takes modules with dependencies
and generates static assets representing those modules.
• You can use webpack for both your client side JS files as well as your
server side node JS files.
Image source: https://webpack.github.io/docs

What does webpack do
• Manage dependencies
• require
• import (e.g. CommonJS, AMD, ESM, etc.)
• Build tasks - convert and preprocess
• Minify
• Combine
• Sass / less conversion
• Babel transpile
• It combines the build system and module bundling, i.e. instead of
building sass and optimizing images in one part of project, and then
combining the script files in another, it combines everything in the
module itself

What does webpack do
• Wraps everything that is a part of the module in the module itself, and creates a bundle of it.
app.js

Webpack.config.js
Import stylesheets from ..
Import logo from ..
Import jquery from $
…
Reads entry point and
load the dependencies
./src/app.js
node_modules Project modules
1
./bin/app.bundle.js
Bundles module
into a single file
2

Pain points
• Module management
• Managing common assets
• Replacement of resources in case of any change

• Module Management
• Bundling all in one
• Managing dependency tree

• It’s the idea that you define, “split points”: areas of your code that
could be easily split off into a separate file and then load on-demand.
Solution : Code Splitting
// This is a split point
require.ensure([], () => {
// All the code in here, and everything that is imported will be in a separate file
const library = require('some-big-library');
$('foo').click(() => library.doSomething());
}, <‘name of the chunk’>);
• A split point creates a chunk for the dependencies, that are checked for
repeatition and split accordingly.
• A chunk is loaded at runtime as jsonp and is loaded only once.

Solution : Plugins - CommonsChunk Plugin
• This will remove all modules in the vendor chunk from the app chunk.
The bundle.js will now contain just your app code, without any of its
dependencies. All dependencies are in vendor.bundle.js.
var webpack = require("webpack");
module.exports = { entry: {
app: "./app.js",
vendor: ["jquery", "underscore", ...], },
output: { filename: "bundle.js" },
plugins: [
new webpack.optimize.CommonsChunkPlugin(/*chunkName=*/”vendor", /* filename=*/ "vendor.bundle.js”
) ] };

• Reloading entire page on every change

Solution : Hot Module Replacement
• HMR is a way of exchanging modules in a running application (and
adding/removing modules). Updating changed modules without a full page
reload.
• app code asks HMR runtime to check for updates in the manifest files created by
webpack compiler.
• If an update exists, it is applied and only that part of the application is reloaded /
updated.
• Every module has to enable HMR, explicitly
var requestHandler = require("./handler.js"); var server = require("http").createServer();
server.on("request", requestHandler); server.listen(8080);
if(module.hot){ // check if HMR is enabled
module.hot.accept("./handler.js", function() {{ // accept update of dependency
server.removeListener("request", requestHandler); // replace request handler of server
requestHandler = require("./handler.js");
server.on("request", requestHandler); });
}

Additional Benefits
• Integrating webpack with gulp / grunt
var gulp = require('gulp');
var webpack = require('webpack-stream');
gulp.task('default', function(callback) {
return gulp.src('src/entry.js')
.pipe(webpack())
.pipe(gulp.dest('dist/'));
});
module.exports = function(grunt) {
grunt.loadNpmTasks("grunt-webpack");
grunt.initConfig({
webpack: {
options: { // configuration for all builds },
build: { // configuration for this build }
},
};
• Profiling
• webpack --profile --json > stats.json
• http://webpack.github.io/analyse/

• Sample application: https://bitbucket.org/anjali_chawla/webpack_intro/src

• Documentation: http://webpack.github.io/docs/
• Plugins: http://webpack.github.io/docs/list-of-plugins.html
• Loaders: http://webpack.github.io/docs/list-of-loaders.htm
References

Webpack

More Related Content

What's hot (20)

Similar to Webpack (20)

Recently uploaded (20)

Webpack

Editor's Notes