It is a build tool that puts all of your assets, including Javascript, images, fonts, CSS, in a dependency graph. It lets us use require() in our source code to point to local files, like images. We can decide how they’re processed in our final javascript bundle, like replacing the path with a URL.

1. Introduction of Webpack 4
By: Vijay Shukla

2. Agenda
Introduction
When to use and Why?
Installation
Configurations
Plugins
Demo

3. What You Need to Know
JavaScript
CSS/SASS
HTML

4. Introduction
It is a build tool that puts all of your assets, including Javascript, images, fonts,
CSS, in a dependency graph.
It lets us use require() in our source code to point to local files, like images.
We can decide how they’re processed in our final javascript bundle, like
replacing the path with a URL.

5. When to use and Why?
If we are building a complex Front End application with many non-code static
assets such as CSS, images, fonts, etc then yes, Webpack will give us great
benefits.
Read More

6. Advantage
● Bundle Javascript files into one file, minimizing http requests.
● Process SASS/LESS files into CSS and only use them when needed.
● Convert JSX or ES2015 into vanilla JS which browser understand.

7. Installation
You must install Node before installing webpack. Check version node --version
Install webpack and webpack-dev-server globally:-
npm install -g webpack webpack-dev-server webpack-cli

8. Start Project with Webpack
1. Create a folder for your project
2. Initialize Project with npm
npm init
3. Add webpack dev dependency in package.json
npm install webpack webpack-dev webpack-cli –save-dev
4. Create an index.html and two scripts files
5. Create bundle file.
webpack ./scripts/func.js –mode development

9. Webpack config file
1. Three main parameter: entry, mode, output

10. webpack-dev-server
It is used to quickly develop our application.
devServer is the set of options used to configure webpack-dev-server.
devServer: {
contentBase: "dist", //Content will be loded from,
overlay: true, //display error in browser itself,
port: 9000 //change the port of the application
}

11. CSS and Style Loader
Since webpack understand javascript, so we need different loaders to load
CSS, HTML5, SCSS etc.
css -loader is a npm module that would help webpack to collect CSS from all
the .css files and put it into string.
Style-loader would take that string and put it into <style></style> tags in
index.html
npm install css-loader style-loader --save-dev

13. HTML Loader
npm install html-loader file-loader --save-dev

14. Image Loader

15. Babel
It is tool to convert ECMAScript 2015+ code into a backwards compatible
version of JavaScript.
● Transform syntax
● Polyfill features that are missing in your target environment (through
@babel/polyfill)
● Source code transformations (codemods)

16. Demo
https://github.com/vijayshukla30/Webpack-Tutorial

18. References
https://webpack.js.org/loaders/
https://medium.com/a-beginners-guide-for-webpack-2/extract-text-plugin-668
e7cd5f551
https://babeljs.io/
https://polyfill.io/v2/docs/features/
https://www.youtube.com/playlist?list=PLmTsWjOvTMNG6I3auZMjIV6ZghbvgC
vm4