What is webpack and how to use it | webpack tutorial

web-pack

What’s webpack?

The shortest answer to this question is to say that Webpack is a module bundler. A little bit longer version would bewebpack is a static module bundler for modern JavaScript applications.

Webpack Relies on Modules. The project you can bundle with webpack consists of at least input and output. When you bundle a project using webpack, it traverses the imports, constructing a dependency graph of the project and then generates an output based on the configuration.

Out of the box, webpack won’t require you to use a configuration file. However, it will assume the entry point of your project is src/index and will output the result in minified dist/main.js and optimized for production.

Yet usually you’ll need a webpack.config.jsfile in the root folder and webpack will automatically use it.

Dependency graph

When one file, for example, index.js depends on(requires) another file named,some-module.js web pack call thissome-module.js a dependency. And let’s say thatsome-module.js depends on another file namedsome-another-module.js. This process will continue until there would be no another dependency.  So webpack traverse through all this dependency recursively starting from our entry pointindex.js building a dependency graph.

The core concept of webpack resides in below 4 items.

Entry

An entry point is like an input to webpack. It’s an entry point where the webpack should start building your dependency graph.

By default its value is,./src/index.js but you can specify a different (or multiple entry points) by configuring the entry property in the webpack configuration.

For example, your webpack.config.js could be like

 

Output

The output property is where the bundled output of webpack resides and the file name of the bundle. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

You can configure this part of the process by specifying an output field in your configuration like

Loaders

Loaders allow webpack to process other types of files and convert them into valid modules that can be processed by your application. B/c webpack understands only javascript by default. Loaders have two properties, test and use.

  • test – tells loader which files should be transformed
  • use – tells which loader should be used for the transformation

A typical use case for loaders could be

This tells webpack to transform every .txt file using the raw-loader loader.

Plugins

Plugins are like a bigger stronger brother of loaders. They can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables etc.

To use plugins in web pack

  • require the plugin
  • add it to the plugins array
  • and finally, use new to create a new instance of the plugin

for example

On the above example, we’ve required the plugin on line two const webpack = require('webpack'); and we’ve added an instance of the plugin into plugins array

and Done.  Easy peasy, right. Let’s move to our final concept.

 

Mode

This is the easy one. By using mode, we just tell webpack on which mode or environment we’re using it. By default it’s production, but it can be,developmentproduction or none.

Example usage

Thanks for reading all along. You can refer to a more detailed explanation here from the official website. Don’t hesitate to ask me if you have any question. Peace 🙂

Programming and Design

Leave a Reply

Your email address will not be published.Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: