Before move into the core concepts, If you wish to see my demo project on Webpack, visit to my following GitHub account….
The Core Concepts of Webpack
There are 6 core concepts in Webpack.
- Browser Compatibility
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.
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.
import any type of module, e.g.
.css files, which may not be supported by other bundlers or task runners.
At a high level, loaders have two properties in your Webpack configuration:
testproperty identifies which file or files should be transformed.
useproperty indicates which loader should be used to do the transforming.
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.
By setting the
mode parameter to either
none, you can enable Webpack's built-in optimizations that correspond to each environment. The default value is
Webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). Webpack needs
require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.
Why do we need Webpack?
- Concatenating multiple files in a correct order is really hard when the file sizes increase.
- Multiple files requires some other files ( it’s dependencies) and then we need to include that mapping in our earlier concatenation approach.
- When the project size increase then the amount of dead code will increase without our knowledge.
- The time it takes to fully load a web page even for a small change of a line of code.
Here the Webpack comes into play,
- Webpack gathers all the dependencies, which includes not just code, but other assets as well, and generate a dependency graph.
- It goes through the dependencies of each file recursively, and resolves every dependency until the traversal has completed and automates the process of downloading/including modules. So it’s being used often in the frameworks/libraries.
- Every file has its own module with its own scope. As a result, this is notably effective if you start using more and more dependencies
- It maintains a registry of all the modules, so they can be correctly called/executed whenever they are required.
- We have a total control over building systems like babel.
- It will notify the dead codes in our system as “Unused modules”. So we can maintain a proper system using Webpack without any unwanted modules.
Let’s see some real world examples of Webpack
3788 popular companies reportedly use Webpack in their tech stacks such as,
Some famous frameworks also using Webpack for their bundling purposes,
It’s demo time…
Here I’ll choose my editor as visual studio code and if you need to work on any other editors, you can feel free to work on it.
Before move into the demo make sure, you have NodeJS installed in your pc.
Create an empty folder and open the folder with your editor and in your editor terminal type npm init -y to initialize your project. Here you will get a package.json file.
Now type npm install webpack webpack-cli — save-dev to install Webpack CLI and you can see a new file named package-lock.json created in your project.
Next install npm modules using npm install command.
After that create a file as your own and rename that file as webpack.config.js
This is your configuration file for webpack.
- npm install svg-inline-loader — save-dev
- npm install — save-dev css-loader style-loader
- npm install — save-dev babel-loader
If you need to work on other types of files, you need to install those files’ loaders in npm official website. https://www.npmjs.com/
Before move into configurations, add all your project related files like html, CSS, JS etc inside your project. For my demo purpose I created index.html and main.css inside a folder called app.
This is the time for the configurations. Here you need to create an object named module.exports and write down all your configurations inside the object. All our core concepts are going to written inside this object.
First I am going to tell what is my entry point to start the bundling process. Then I will create an object inside module.exports called module and inside my module object will create an array called rules.
Remember, if you install any loaders as I mentioned before, you need to configure them in your rules section.
In my case, I will start my bundle process with a file main.css. You can start with any file you want :)
After that configure my output configurations. In order to do that first you need to import path from nodes. Then can mention a folder name and output file name where you going save your output bundle.
Here in my case I will store my output inside a folder name dist and the file name is bundle.js
Next I am going to install plugins. You can install any plugins you want. For my purpose I will install html webpack plugins. The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. You can either let the plugin generate an HTML file for you, or can supply your own template.
To install the plugin type npm install — save-dev html-webpack-plugin.
Here I mentioned my own html file inside the template. So what it will do is, once it bundle the output, It will automatically inject your bundle in your html file head section.
Final part of the configuration is to mention the mode. By setting the
mode parameter to either
none, you can enable Webpack's built-in optimizations that correspond to each environment.
This is all in the webpack configuration section. at last you need to configure a couple of things in the package.json
Before move into package.json configuration, first install npm install webpack-dev-server — save-dev. It will install a local server for you.
Now add the following commands to start your server or build your webpack bundle.
Now let’s run your server and also build your bundle and see the magic that created by Webpack.
Do you need to know how to apply multiple files to bundle your project? Visit my GitHub account which I mentioned at top of this blog.
Thank you so much for your patience. Good luck :)