What Is Webpack Loader And Plugin?
February 15, 2023
When we use webpack, we will often use different loaders or plugins. If you have mentioned the skills you know on your resume, you may be asked what loader and plugin are, and what are the differences between them.
What Is Loader?
Loader allows webpack to process other types of files and convert them into modules that can be included in your application and added to the dependency graph. From the perspective of the program, the loader itself is a JavaScript function, and different loaders are functions that can process different types of files.
For example, if we want to process .css files, we can use style-loader and css-loader to handle it. Through these two loaders, let webpack, which only understands JavaScript and JSON, also handle css, so that the .css file can be bundled into the final file.
How to use loader?
There are two ways to use loader, one is configuration, and the second is inline.
The official recommended method is the first configuration method, which is to specify the loader in the webpack.config.js file. We can specify what file type to use one or more loaders in module.rules, and the execution of the loader will be from right to left in sequence. The previous loader will pass the execution result to the next loader, until the last loader returns the file that webpack needs.
For example, if we want to use sass-loader to process .css files, we can use the following code example, and the execution order will be sass-loader ⇒ css-loader ⇒ style-loader
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options: {
modules: true,
},
},
{ loader: "sass-loader" },
],
},
],
},
};
What Are the Common Loaders?
There are many loaders in webpack, and the most commonly used loaders are as follows (more loaders can be referenced on the webpack official website):
babel-loader: Use Babel to convert ES2015+ code into ES5esbuild-loader: Use esbuild to transpile ES2015+ code into ES6+style-loader: Adds CSS to the DOM by injecting a<style>tagcss-loader: Loads CSS files and resolves import/require() on them, and returns CSS code
What Is Plugin?
webpack loader is used to convert resources into modules that webpack can understand, and webpack plugin is used to extend the functionality of webpack. The webpack life cycle provides hooks at each stage, which can be used by developers to extend the functionality of webpack.
From the perspective of the program, the loader is a function, and the plugin is an object with an apply method. In the apply method, the developer registers the hook provided by the webpack life cycle. When the life cycle reaches the stage, the function written in apply will be called back.
How to use plugin?
When we use plugin, we will first use the require syntax to import the plugin we need, and instantiate it through new, and add it to the array of plugins. As shown in the following code example
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./path/to/my/entry/file.js",
output: {
filename: "my-first-webpack.bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
},
],
},
plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};
See the example above, HtmlWebpackPlugin helps to generate an HTML file during the packaging process, and automatically injects all packaged files into this HTML file (for detailed usage, please refer to this document). This is a function that webpack does not provide, and through this plugin we can further obtain this function.