Scribd
Upload
4 views

webpack

Webpack is a module bundler for modern JavaScript applications that creates a dependency graph from entry points and combines modules into bundles. Key concepts include entry points, output configuration, loaders for file transformations, plugins for optimization, and mode settings for different environments. It supports ES5-compliant browsers and requires polyfills for older versions.

Uploaded by

Dhaouadi Dhia
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

webpack

Webpack is a module bundler for modern JavaScript applications that creates a dependency graph from entry points and combines modules into bundles. Key concepts include entry points, output configuration, loaders for file transformations, plugins for optimization, and mode settings for different environments. It supports ES5-compliant browsers and requires polyfills for older versions.

Uploaded by

Dhaouadi Dhia
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Save it Like it

Bundle your assets using


Webpack

@coder_aishya
01
What is Webpack ?
Webpack is a module bundler for modern
JavaScript applications.

Bundler bundle.js

Bundler bundle.css

Optimized
Bundler
jpg

Webpack analyzes connections & Bundles/


Optimizes everything

@coder_aishya
02

Core concepts of Webpack


Webpack is a module bundler for modern
JavaScript applications.

Entry
Output
Loaders
Plugins
Mode
Browser Compatibility

@coder_aishya
03
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.

Entry
An entry point indicates which module webpack
should use to begin building out its internal
dependency graph.

webpack.config.js

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.

@coder_aishya
04

Output
this configuration parameter simply tells the
Webpack where to output the bundle that it creates.

webpack.config.js

It defaults to ./dist/main.js for the main output file


and to the ./dist folder for any other generated file.

@coder_aishya
05

Loaders
After sepcifying the entry point for the application,
the next thing to tell our Webpack is what should it
do with the files within our project. In other words,
what kind of transformations that need to be applied
to our files.
To do that, we have something called the 'loaders'. By
default, Webpack looks at all the JSON and JS files to
build the dependency graph as shown above.

Every loader has 2 attributes that need to be


defined:

use - The name of the loader.


test - The regex to match the file path.

@coder_aishya
06

webpack.config.js

Plugins

plugins 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.

@coder_aishya
07

webpack.config.js

In the example above, the html-webpack-plugin


generates an HTML file for your application and
automatically injects all your generated bundles into
this file.

@coder_aishya
08
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.

webpack.config.js

Browser Compatibility
Webpack supports all browsers that are ES5-
compliant (IE8 and below are not supported).
Webpack needs Promise for import() and
require.ensure(). If you want to support older
browsers, you will need to load a polyfill before using
these expressions.

@coder_aishya
Follow me for more

aishwarya-dhuri

coder_aishya

You might also like