From 1d6e8fab823c9b0ff16fbd9755b62bda9308ec94 Mon Sep 17 00:00:00 2001 From: Aditya Raj Date: Wed, 11 Mar 2026 03:31:56 +0530 Subject: [PATCH 1/5] docs: modernize 'Writing a Loader' guide to ESM syntax --- src/content/contribute/writing-a-loader.mdx | 24 ++++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index 786dedb56974..c1f77b5ef385 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -23,9 +23,9 @@ To test a single loader, you can use `path` to `resolve` a local file within a r **webpack.config.js** ```js -const path = require("node:path"); +import path from "node:path"; -module.exports = { +export default { // ... module: { rules: [ @@ -50,9 +50,13 @@ To test multiple, you can utilize the `resolveLoader.modules` configuration to u **webpack.config.js** ```js -const path = require("node:path"); +import path from "node:path"; +import { fileURLToPath } from "node:url"; -module.exports = { +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + +export default { // ... resolveLoader: { modules: ["node_modules", path.resolve(__dirname, "loaders")], @@ -85,7 +89,7 @@ In the following example, the `foo-loader` would be passed the raw resource and **webpack.config.js** ```js -module.exports = { +export default { // ... module: { rules: [ @@ -232,13 +236,13 @@ Avoid generating common code in every module the loader processes. Instead, crea **src/loader-runtime.js** ```js -const { someOtherModule } = require("./some-other-module"); +import { someOtherModule } from "./some-other-module.js"; -module.exports = function runtime(params) { +export default function runtime(params) { const x = params.y * 2; return someOtherModule(params, x); -}; +} ``` **src/loader.js** @@ -341,9 +345,13 @@ npm install --save-dev webpack memfs ```js import path from "node:path"; +import { fileURLToPath } from "node:url"; import { Volume, createFsFromVolume } from "memfs"; import webpack from "webpack"; +const __filename = fileURLToPath(import.meta.url); +const __dirname = path.dirname(__filename); + export default (fixture, options = {}) => { const compiler = webpack({ context: __dirname, From f1d5543970c8b77eb19be60ddf51e5782c3e9ed0 Mon Sep 17 00:00:00 2001 From: Aditya Raj Date: Wed, 11 Mar 2026 04:22:08 +0530 Subject: [PATCH 2/5] docs(contribute): fix prose reference and add contributor --- src/content/contribute/writing-a-loader.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index c1f77b5ef385..297017f85608 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -10,6 +10,7 @@ contributors: - chenxsan - dev-itsheng - evenstensberg + - hagemaruwu --- A loader is a node module that exports a function. This function is called when a resource should be transformed by this loader. The given function will have access to the [Loader API](/api/loaders/) using the `this` context provided to it. @@ -231,7 +232,7 @@ T> If the language only accepts relative urls (e.g. `url(file)` always refers to ### Common Code -Avoid generating common code in every module the loader processes. Instead, create a runtime file in the loader and generate a `require` to that shared module: +Avoid generating common code in every module the loader processes. Instead, create a runtime file in the loader and `import` it as a shared module: **src/loader-runtime.js** From c7091b329b8aaaff721b44504519fc8f097ba2b5 Mon Sep 17 00:00:00 2001 From: Aditya Raj Date: Thu, 12 Mar 2026 11:39:05 +0530 Subject: [PATCH 3/5] docs(contribute): use import.meta.dirname instead of fileURLToPath --- src/content/contribute/writing-a-loader.mdx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index 297017f85608..eb96eb06ebff 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -52,10 +52,8 @@ To test multiple, you can utilize the `resolveLoader.modules` configuration to u ```js import path from "node:path"; -import { fileURLToPath } from "node:url"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); +const __dirname = import.meta.dirname; export default { // ... @@ -347,11 +345,9 @@ npm install --save-dev webpack memfs ```js import path from "node:path"; import { fileURLToPath } from "node:url"; -import { Volume, createFsFromVolume } from "memfs"; import webpack from "webpack"; -const __filename = fileURLToPath(import.meta.url); -const __dirname = path.dirname(__filename); +const __dirname = import.meta.dirname; export default (fixture, options = {}) => { const compiler = webpack({ From a6da89d764d4fb4bc26a9b6a90d380f4276dcde2 Mon Sep 17 00:00:00 2001 From: Aditya Raj Date: Thu, 12 Mar 2026 17:56:29 +0530 Subject: [PATCH 4/5] docs(contribute): add note about commonjs support --- src/content/contribute/writing-a-loader.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index eb96eb06ebff..2756bb575bb1 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -230,7 +230,9 @@ T> If the language only accepts relative urls (e.g. `url(file)` always refers to ### Common Code -Avoid generating common code in every module the loader processes. Instead, create a runtime file in the loader and `import` it as a shared module: +- Avoid generating common code in every module the loader processes. Instead, create a runtime file in the loader and `import` (or `require`) it as a shared module: + +W> While CommonJS syntax (`require`) is completely supported, we highly recommend using ECMAScript Modules (`import`) for new loaders. **src/loader-runtime.js** From eea791fbb98995cc1b097ac00efc9d47f18e7098 Mon Sep 17 00:00:00 2001 From: Aditya Raj Date: Thu, 12 Mar 2026 18:23:19 +0530 Subject: [PATCH 5/5] docs(contribute): add note about commonjs support and fix memfs import --- src/content/contribute/writing-a-loader.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/contribute/writing-a-loader.mdx b/src/content/contribute/writing-a-loader.mdx index 2756bb575bb1..88e392047f46 100644 --- a/src/content/contribute/writing-a-loader.mdx +++ b/src/content/contribute/writing-a-loader.mdx @@ -346,7 +346,7 @@ npm install --save-dev webpack memfs ```js import path from "node:path"; -import { fileURLToPath } from "node:url"; +import { Volume, createFsFromVolume } from "memfs"; import webpack from "webpack"; const __dirname = import.meta.dirname;