Introduction to Webpack Module Bundler

Webpack: Webpack is a static module bundler used for JavaScript applications. Since webpack understands only JavaScript and JSON files, It transforms front-end assets such as HTML, CSS, and images into valid modules if the corresponding loaders are included. While Processing your application webpack internally builds a dependency graph that maps every module your project needs and produces one or more output bundles.

Some core concepts of webpack are:

1. Entry
2. Output
3. Loaders
4. Plugins
5. Mode

Entry: An entry point defines which module webpack should use to start building out its internal dependency graph. The entry point’s default value is ./src/index.js, but in the webpack configuration., you can specify a different or multiple entry points by setting an entry property within this file.

Let us consider an example in which file.js inside the GeeksForGeeks directory is the entry point. Then the webpack.config.js file should be as follows:

Filename: webpack.config.js

module.exports = {
 entry: './GeeksForGeeks/file.js'
};

Output: The output property indicates webpack where to emit the bundles it creates and tells the way to name these files. By default, its value is ./dist/main.js for the main output file and it is ./dist folder for any other generated file, but we can change this part of the process by specifying an output field in our configuration.

Filename: webpack.config.js

const path = require('path');
module.exports = {
 entry: './GeeksForGeeks/file.js',
 output: {
   path: path.resolve(__dirname, 'gfg'),
   filename: 'GeeksForGeeks-webpack.bundle.js'
 }
};

Loaders: Since webpack only understands JavaScript and JSON files. Loaders process other types of files and after that, it converts them into the valid modules which can be consumed by our application, and add them to the dependency graph.

Loaders preprocess the other type of files and them to the bundle, Loaders have two properties in webpack configuration through which they achieve this:

1. The test property
2. The use property

The test property: It is used to identify which file or files should be transformed by the respective loader. Usually, a regular expression is used to identify the file or files which should be transformed.

The use property: It is used to indicate which loader should be used to do the transforming.

Filename: webpack.config.js

const path = require('path');
module.exports = {
 output: {
   filename: 'GeeksForGeeks-webpack.bundle.js'
 },
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 }
};

The above webpack configuration above has defined a rules property for one module with two required properties which are test and use. When webpack compiler encounters a path that resolves to a ‘.txt’ file inside a require()/import statement, it will use the raw-loader to transform it before adding it to the bundle.

Plugins: While loaders are used to preprocess certain types of modules, plugins can be used to carry out a wider range of tasks like an injection of environment variables, asset management, and bundle optimization.

In order to use a plugin, we have to require() it and add it to the plugins array. Plugins can be customized through options. Since a plugin can be used multiple times in a configuration for different purposes, we need to create an instance of it by calling it with the new operator.

Filename: webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
 module: {
   rules: [
     { test: /\.txt$/, use: 'raw-loader' }
   ]
 },
 plugins: [
   new HtmlWebpackPlugin({template: './src/GeeksForGeeks.html'})
 ]
};

In the example above, the html-webpack-plugin is used to generate an HTML file for our application by injecting all our generated bundles automatically.

Mode: We can enable webpack’s built-in optimizations that correspond to each environment by setting the mode parameter to either development, production, or none. Its default value is production.

Filename: webpack.config.js

module.exports = {
 mode: 'development'
}