An Intro into webpack

An Intro into
webpack
Mohanapriya.R
Software Engineer,
Squash Apps.
1

● What is webpack?
● Understanding the Core concepts
● Configure webpack
● Working Examples
● Why is webpack necessary?
OUTLINE
2

What is webpack?
● A Module Bundler.
● A Task Runner.
3

Understanding Core Concepts
● Entry
● Output
● Loaders
● Plugin
● Mode
4

Entry Point
● Defines a module for webpack to
begin with.
● Generates Dependency graph.
● Figure out Entry point’s dependencies.
● By default, ./src/index.js
module.exports = {
entry: './path/to/my/entry/file.js'
};
webpack.config.js
5

Output
webpack.config.js
● Defines where to emit the created bundles.
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
6

Loaders
● Webpack Understands JS & JSON files.
● Loaders allow webpack to process other
files.
● Two props:
○ Test - Identifies file to be transformed.
○ Use - Indicates loaders to be used.
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [{
test: /.txt$/,
use: 'raw-loader'
}]
}
};
webpack.config.js
7

Plugin
● Bundle optimization
● Asset Management
● Injection of env variables.
● Customizable through options.
○ require() a plugin to use it.
○ Create an instance of the plugin with
new operator
const HtmlWebpackPlugin =
require('html-webpack-plugin');
//installed via npm
const webpack = require('webpack');
//to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template:
'./src/index.html'})
]
};
webpack.config.js
8

Mode
● Development
● Production
● None
● By default, mode: production.
module.exports = {
mode: 'production'
};
webpack.config.js
9

Configure Webpack
● webpack.config.js
● Webpack is configuration driven & Highly configurable.
● Install node.js & verify npm is working.
● mkdir <dirname> && cd <dirname>
● npm init -y
● npm i -D webpack webpack-cli
● code .
● Add build in package.json
10

● Bundling JS
● Bundling HTML
● Bundling Images
● Bundling Scss
Working Examples
11

● Create src folder
● Add js files under src
Bundling JS
npm run build
● Generates Dist
folder
● Generates main.js
12

● Create index.html
● Add script file to src
Bundling HTML
http-server -o Syntax error
Because, Webpack
has ZERO
configurations..!
● Configure Webpack
● Create webpack.config.js
● npm i -D html-webpack-plugin
html-loader
● Initialize the loader in webpack
config file.
13

const HtmlWebpackPlugin = require("html-
webpack-plugin");
module.exports = {
module: {
rules: [{
test: /.html$/,
use: [{
loader: "html-loader",
options: { minimize: true}
}]
},]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
]}
Bundling HTML contd...
npm run build Generates index.html
14

● Install webpack server
○ npm i -D webpack-dev-server
● Add scripts to package.json
○ “start:dev” : “webpack-dev-server”
● npm run start:dev
Install Webpack server
15

● Create folder => images.
● Add image in to the folder.
● Insert image in img tag of
index.html
Bundling Images
npm run build Nothing happens!
● npm i -D file-loader
● webpack.config.js
{
test: /.(png|svg|jpg|gif)$/,
use: [ 'file-loader' ]
}
npm run build Creates images in dist
16

● npm i -D node-sass style-loader css-loader
sass-loader mini-css-extract-plugin
● Create folder => styles
● Include main.scss file.
● Import the file.
● In webpack.config.js
{
test: /.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
Bundling SCSS
npm run build
Scss variables found in js
under dist folder.
17

Why is webpack necessary?
● Cares about Performance & Load time
● Provides best possible experience
● Improved readability & maintainability of the project.
● Provides features like,
○ Hot Module Replacement
○ Lazy Loading
○ Bundle splitting
○ Hashing
○ Source maps
● Integral part of JS Ecosystem.
18

An Intro into webpack

More Related Content

What's hot

What's hot (20)

Similar to An Intro into webpack

Similar to An Intro into webpack (20)

More from Squash Apps Pvt Ltd

More from Squash Apps Pvt Ltd (15)

Recently uploaded

Recently uploaded (20)

An Intro into webpack