In Webpack, <a href="https://webpack.js.org/concepts/plugins/">loaders</a> and <a href="https://webpack.js.org/concepts/loaders/">plugins</a> are two essential concepts that help you process and manipulate your JavaScript modules and assets during the build process.
<h2>Loaders</h2>
Loaders are transformations that are applied to your source code or assets as they are imported into your JavaScript modules. They are typically used to preprocess files such as JavaScript, TypeScript, CSS, and more before bundling them into the final output bundle.
<pre class="shiki github-dark shaku"><code>// webpack.config.jsmodule.exports = { // Other webpack configuration options... module: { rules: [ { test: /\.js$/, // Apply the loader to .js files exclude: /node_modules/, // Exclude the node_modules directory use: { loader: 'babel-loader', // Specify the loader (babel-loader in this case) options: { presets: ['@babel/preset-env'] // Babel preset for ES6 to ES5 conversion } } } ] }};</code></pre>
<h2>Plugins</h2>
Plugins allow you to perform a wide range of tasks like optimizing your bundles, injecting variables, adding assets, and more. Plugins run after the entire bundle is generated and can access the compilation process and its results.
<pre class="shiki github-dark shaku"><code>// my-custom-plugin.jsclass MyCustomPlugin { constructor(options) { this.options = options || {}; } apply(compiler) { compiler.hooks.emit.tapAsync('MyCustomPlugin', (compilation, callback) =&gt; { // Iterate through all compiled assets and add a custom comment for (const assetName in compilation.assets) { if (Object.prototype.hasOwnProperty.call(compilation.assets, assetName)) { const asset = compilation.assets[assetName]; const comment = this.options.comment || 'Custom comment added by MyCustomPlugin'; asset.source = () =&gt; `${comment}\n${asset.source()}`; } } callback(); }); }}module.exports = MyCustomPlugin;// Now, you can use this custom plugin in your webpack.config.jsconst MyCustomPlugin = require('./my-custom-plugin');module.exports = { // Other webpack configuration options... plugins: [ new MyCustomPlugin({ comment: 'Hello, Webpack!' }) ]};</code></pre>

Webpack Loaders and Plugins

Better try to create one Webpack plugin and one Webpack loader, then you will know everything about them.…