Introduction to Webpack 5.0 Presentation

Introduction to Webpack 5
Anirudh Singh and Piyush Agarwal

Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
 Punctuality
Join the session 5 minutes prior to the session start time. We start on
time and conclude on time!
 Feedback
Make sure to submit a constructive feedback for all sessions as it is very
helpful for the presenter.
 Silent Mode
Keep your mobile devices in silent mode, feel free to move out of session
in case you need to attend an urgent call.
 Avoid Disturbance
Avoid unwanted chit chat during the session.

1. What is Webpack?
2. Webpack packaging application
3. Understanding the core concepts
4. Configure Webpack
5. Demo

What is Webpack?
 Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a
browser.
 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,
which are static assets to serve your content from.

Webpack packaging application
www.awesome-website.com
Calculate.
min.js
style.min.js
main.min.j
s
library.min.
js
Optimised
assets
 Load all types of assets in module format.
 Dynamically building the dependency
graph.
 Removing unused code in library.
 Removing duplication of code.
 Fetching modules in runtime.

How webpack works?
Index.js
cart.js
pay.js
order.js
admin.js
home.cs
s
bootstrap
.css
admin.cs
s
logo.png
admin.pn
g
webpack
.png
bundle.js
vendor.js
bundle.css
Index.html
Entry Line
Webpack Output
<script src="./bundle.js">
<script src="./vendor.js>
<link href="./bundle.css">
Webpack

Understanding of core concepts
 Entry
 Output
 Loaders
 Plugins
 Mode

Entry Point
 An entry point indicates which module webpack should use to begin building out its
internal dependency graph.
 Webpack will figure out which other modules and libraries that entry point depends on (directly and
indirectly).
 By default its value is ./src/index.js, but you can specify a different (or multiple) entry points by
setting an entry property in the webpack configuration.
 module.exports = {
entry: './path/to/my/entry/file.js',
}

Output
 The output property tells webpack where to emit the bundles it creates and how to name these
files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other
generated file.
 You can configure this part of the process by specifying an output field in your configuration:
 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',
},
};

Plugins
 While loaders are used to transform certain types of modules, plugins can be leveraged to perform
a wider range of tasks like bundle optimization, asset management and injection
of environment variables.
 In order to use a plugin, you need to require() it and add it to the plugins array. Most
plugins are customizable through options. Since you can use a plugin multiple times in a configuration
for different purposes, you need to create an instance of it by calling it with the new operator.
 const HtmlWebpackPlugin = require('html-webpack-plugin');
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' })],
};

Loaders
 Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to
process other types of files and convert them into valid modules that can be consumed by your
application and added to the dependency graph.
 At a high level, loaders have two properties in your webpack configuration:
 The test property identifies which file or files should be transformed.
 The use property indicates which loader should be used to do the transforming.
 const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /.txt$/, use: 'raw-loader' }],
},
};

Mode
 By setting the mode parameter to either development, production or none, you can
enable webpack's built-in optimizations that correspond to each environment. The default
value is production.
 module.exports = {
mode: 'production',
};

Configure Webpack
 Webpack.config.js
 Webpack is configuration drive and highly configurable
 Install node.js and verify npm is working fine
 Make a directory and move to the required path
 npm init –y
 npm i - - save-dev webpack-cli webpack
 code .
 Add build in package.json

Introduction to Webpack 5.0 Presentation

More Related Content

Similar to Introduction to Webpack 5.0 Presentation (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Introduction to Webpack 5.0 Presentation