Introduction to Webpack Module Bundler
Last Updated :
14 Dec, 2020
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:
- Entry
- Output
- Loaders
- Plugins
- 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:
- The test property
- 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'
}
Similar Reads
Introduction to packages and modules in npm The Node Package Manager (npm) serves as a tool for the JavaScript programming language functioning both as a command line utility and package manager. It is the choice for managing dependencies and sharing packages within the NodeJS environment. The public npm registry acts as a centralized platfor
4 min read
Introduction to Angular Concepts Angular, a powerful front-end framework developed by Google, has revolutionized the way modern web applications are built. For newcomers to web development, Angular can seem to be a great choice due to its features, concepts, and terminologies. In this article, we'll see more about the journey of An
5 min read
Angular 8 | Introduction Angular 8 is a client-side TypeScript based, front-end web framework by Google. Angular 8 is a great, reusable UI (User Interface) library for the developers which help in building attractive, steady, and utilitarian web pages and web application. Angular 8 is a ground-breaking JavaScript framework
4 min read
How to declare a module in TypeScript ? A module is a piece of code that can be called or used in another code. There is nothing new about modules in Typescript. The concept of the module was introduced by JavaScript with ECMAScript 2015 release. Typescript is just re-using this feature.Will the code not work without Modules?Of course, it
7 min read
Next.js Reducing Bundle Size Reducing the bundle size in a Next.js application is essential for improving performance and load times. A smaller bundle size means quicker page rendering and a better user experience. Here are strategies to help you minimize your Next.js bundle size.Prerequisites:Introduction to Next.jsNext.js Dyn
4 min read
Introduction to NPM scripts NPM is a Node Package Manager. It is the world's largest Software Registry. This registry contains over 800,000 code packages. Many Open-source developers use npm to share software. Many organizations also use npm to manage private development. "npm scripts" are the entries in the scripts field of t
2 min read