3. • What is Webpack ?
• What does Webpack do ?
• Why should I use Webpack ?
• How do i use Webpack ?
06/21/17 3
Contents
4. 06/21/17 4
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.
5. 06/21/17 5
What does webpack do?
Manage dependencies
•
require
•
import (e.g. CommonJS, AMD, ES6, 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.
6. 06/21/17 6
Why should I use webpack ?
Code Splitting :
Split the dependency tree into chunks and load on demand
Maintain the dependency tree
Create chunks of the modules and load them from webpack
runtime environment
Reduce initial loading time
Reduce the number of HTTP requests / for HTTP 2.0 use
plugins to reduce the chunk size to optimize it for caching
Optimize the combined file so as to reduce the load time, while
ensuring avoiding of code redundancy.
7. 06/21/17
Webpack.config.js
Multiple entry points
It will build multiple bundles at once. Additional chunks can be
shared between these entry chunks and modules are only built once.
Every entry chunk contains the webpack runtime.
{
entry: {
a: "./a",
b: "./b",
c: ["./c", "./d"]
},
output: {
path: path.join(__dirname, "dist"),
filename: "[name].entry.js"
}
}
8. 06/21/17 8
Loaders
Functions (running in node.js) that take the source of a resource file as
the parameter and return the new source.
Loaders can be chained and the final loader is expected to return
JavaScript. They are applied right to left.
module: {
loaders: [
{ test: /.css$/,
loader: "style!css"
}
]
}
9. 06/21/17 9
Getting started
$ npm install webpack –g
webpack // for building once for development
webpack -p // for building once for production (minification)
webpack --watch // for continuous incremental build in development (fast!)
