Naveen Reddy
I ❤️ building useful stuff!! Passionate about coding and design.
Webpack From Zero to Hero
Naveen Reddy Marella
Utah
Pearson
Expectations For Today
- Introduction
- Problems with JavaScript Ecosystem??
- History of Modules
- Why WebPack ??
- Learning WebPack from Scratch
- WebPack Core Concepts
- Extending WebPack Configs
Introduction
- What is Webpack ??
WebPack is a module bundler for Javascript
JavaScript History
- How do we load javascript ??
Using script tag in head or referring to an external file
- Too Many Scripts
- No of HTTP requests
- Order of Scripts
- Rebuilds Every time -- Dead Code Elimination
- Scoping issues
- Reusable Code
Solution for Scope Issues:- IIFE
var x = "Hello"
(function(){
var x = "World";
console.log(x);
})() // This is what an IIFE is
console.log(x);Revealing Module Pattern
Concatenate Files using IIFE's
Solution to no of files:
Task Runners
- Grunt
- Gulp
- Make
Module Bundlers
- Browserify
- WebPack
- RollUp
- Parcel
-- prefixing css rules
-- compiling css - preprocessors - SASS to CSS
-- Converting JSX to js
-- Minifying JS
-- Concatenating files
Module bundling refers to bundle Javascript modules (ex:- ES2015 modules, CommonJs, AMD, UMD) into a single file (or bundles) for use in production environments.
Javascript Modules -- Node js
How do we load JavaScript if there is no DOM ??
Reuse any module using NPM + node_modues
ESM Modules - Also called as Harmony modules
http://2ality.com/2014/09/es6-modules-final.html
Problems
- No browser support
- No lazy loading in Common JS
- Status of ESM in node -- .mjs experimental
What is webpack ??
How to Use WebPack
- Using webpack config
- Using webpack-cli
Let's see in Practical
- UseCase 1 - Run webpack without config
- UseCase 2 - Run webpack with mode
- UseCase 3 - Add node debugger in scripts
- UseCase 4 - Adding more modules and use in index.js
- UseCase 5 - Adding watch mode -- VS Codeauto import extension
- UseCase 6 - Tree shaking and dead-code elimination
- UseCase 7 - Webpack bundle walkthrough
Let's build WebPack Config
- Entry
- Output
- Loaders and Rules
- Plugins
module.exports = {
entry: './src/index.js',
output: {
path: './dist',
filename: './bundle.js'
},
module:{
rules: [
{
test: '/\.(js|jsx)$/',
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './dist/index.html',
}),
]
}
Loaders work at a file level during/before bundle generation (Ex:- babel-loader - ES6-ES5)
Plugins work at a bundle/chunk level at the end of bundle generation (ex;- UglifyJSPlugin for minification)
- Code Splitting
- Adding source maps
- Extending Configs for different environments
- Extending create-react-app config
Thank You
WebPack from Scratch
By Naveen Reddy
