An Intro into webpack
Download as PPTX, PDF2 likes1,450 views
Webpack is a module bundler and task runner essential for optimizing performance and load time in JavaScript applications. It involves core concepts like entry points, output configuration, loaders, plugins, and modes, all of which can be configured in a webpack.config.js file. Webpack enhances project maintainability and readability, providing features such as hot module replacement, lazy loading, and bundle splitting.
![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](https://image.slidesharecdn.com/webpack-190606091537/85/An-Intro-into-webpack-7-320.jpg)
![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](https://image.slidesharecdn.com/webpack-190606091537/85/An-Intro-into-webpack-8-320.jpg)
![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](https://image.slidesharecdn.com/webpack-190606091537/85/An-Intro-into-webpack-14-320.jpg)
![● 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](https://image.slidesharecdn.com/webpack-190606091537/85/An-Intro-into-webpack-16-320.jpg)
![● 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](https://image.slidesharecdn.com/webpack-190606091537/85/An-Intro-into-webpack-17-320.jpg)
An Intro into webpack
- 1. An Intro into webpack Mohanapriya.R Software Engineer, Squash Apps. 1
- 2. ● What is webpack? ● Understanding the Core concepts ● Configure webpack ● Working Examples ● Why is webpack necessary? OUTLINE 2
- 3. What is webpack? ● A Module Bundler. ● A Task Runner. 3
- 4. Understanding Core Concepts ● Entry ● Output ● Loaders ● Plugin ● Mode 4
- 5. 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
- 6. 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
- 7. 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
- 8. 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
- 9. Mode ● Development ● Production ● None ● By default, mode: production. module.exports = { mode: 'production' }; webpack.config.js 9
- 10. 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
- 11. ● Bundling JS ● Bundling HTML ● Bundling Images ● Bundling Scss Working Examples 11
- 12. ● Create src folder ● Add js files under src Bundling JS npm run build ● Generates Dist folder ● Generates main.js 12
- 13. ● 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
- 14. 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
- 15. ● 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
- 16. ● 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
- 17. ● 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
- 18. 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
- 20. Thank you..! 20