A Small PPT on Webpack

1. WEBPACK
WELCOME TO A SMALL SESSION ON WEBPACK

2. What is webpack?
webpack is a static module bundler for modern JavaScript applications. When webpack processes your
application, it internally builds a dependency graph from one or more entry points and then combines
every module your project needs into one or more bundles

3. ARE WE USING WEBPACK? IN XSEED

4. Why Webpack?
Network load
Difficult to debug
Difficult to read
Somewebsite.com (muliple file approach) Somewebsite.com (lesser files approach)
admin.
js
cart.js pay.js
order.j
s
home.
css
bootstr
ap.css
admin
.css
main.js external.js
main.
css

5. How drawbacks can be removed
● The development environment can follow multi file approach
● While deployment we move it to lesser files approach
THIS IS BASICALLY HOW WEBPACK WORKS

6. webpack
index.j
s
pay.js
cart.js
admin.
js
order.j
s
home.
css
bootstr
ap.css
admin.
css
logo.p
ng
avatar.
png
Webpack o/p
bundle.js
vendor.js
bundle.css
index.html

7. BASIC WEBPACK CONFIG
const path = require("path")
module.exports = {
entry: "./index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
}

8. WEBPACK LOADERS
WEBPACK cannot bundle all files natively. It needs to have loaders for different
file extensions. EX: Incase we try to load css in our project we need css loader for
it to get loaded
NOTE: The order in which we call a loader in use array should be proper

9. LOADER BASIC STRUCTURE
module: {
rules: [
{
test: /.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}
]
}
]
}

10. ADDITIONAL CUSTOMIZATIONS
Way to further customize the output of loaders we use plugin in webpack
PLUGIN STRUCTURE:
plugins: [
new html_webpack_plugin({
template: path.resolve(__dirname, "src/index.html"),
chunks: ["index"],
inject: true,
filename: "index.html"
}),
new html_webpack_plugin({
template: path.resolve(__dirname, "src/products.html"),
chunks: ["product"],
inject: true,
filename: "products.html"
})
]

11. CODE SPLITTING
● Common modules can be bundled separately
● Browser cache will be used effectively
HOW TO DO CODE SPLITTING:
optimization: {
splitChunks: {
chunks: 'all'
}
}

12. Extract CSS from HTML using mini-css-extract-plugin
Currently style-loader injects css to html site itself because of this a single text
change in HTML will also invalidate browser cache for css
DEAD CSS CAN BE REMOVED BY: PurgeCss

13. Tree Shaking
PROCESS OF REMOVING UNUSED JS CODE
Q: HOW TO DO IT?
A: NOTHING JUST BUILD THE APP IN PRODUCTION MODE AND
TREESHAKING IS PERFORMED AUTOMATICALLY

14. THANK YOU ALL