{"id":22808901,"url":"https://github.com/morganney/magic-comments-loader","last_synced_at":"2026-03-01T23:33:42.640Z","repository":{"id":47017596,"uuid":"404247846","full_name":"morganney/magic-comments-loader","owner":"morganney","description":"Add webpack magic comments to your dynamic imports at build time.","archived":false,"fork":false,"pushed_at":"2026-02-07T22:10:38.000Z","size":818,"stargazers_count":12,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-08T04:33:15.208Z","etag":null,"topics":["dynamic-import","magic-comments","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/morganney.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-09-08T07:12:24.000Z","updated_at":"2026-02-07T21:25:47.000Z","dependencies_parsed_at":"2023-12-26T12:09:37.046Z","dependency_job_id":"6556ea27-5b9e-40b1-bc13-b488ae04adb9","html_url":"https://github.com/morganney/magic-comments-loader","commit_stats":{"total_commits":34,"total_committers":2,"mean_commits":17.0,"dds":0.05882352941176472,"last_synced_commit":"a13e3f65605c795f6b4a0a05f08d2e09f5a6a96e"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/morganney/magic-comments-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fmagic-comments-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fmagic-comments-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fmagic-comments-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fmagic-comments-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/morganney","download_url":"https://codeload.github.com/morganney/magic-comments-loader/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/morganney%2Fmagic-comments-loader/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29987698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-01T22:42:38.399Z","status":"ssl_error","status_checked_at":"2026-03-01T22:41:51.863Z","response_time":124,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dynamic-import","magic-comments","webpack","webpack-loader"],"created_at":"2024-12-12T11:12:45.410Z","updated_at":"2026-03-01T23:33:42.634Z","avatar_url":"https://github.com/morganney.png","language":"JavaScript","readme":"# [`magic-comments-loader`](https://www.npmjs.com/package/magic-comments-loader) 🪄\n\n![CI](https://github.com/morganney/magic-comments-loader/actions/workflows/ci.yml/badge.svg)\n[![codecov](https://codecov.io/gh/morganney/magic-comments-loader/branch/main/graph/badge.svg?token=1DWQL43B8V)](https://codecov.io/gh/morganney/magic-comments-loader)\n[![NPM version](https://img.shields.io/npm/v/magic-comments-loader.svg)](https://www.npmjs.com/package/magic-comments-loader)\n\nKeep your source code clean, add [magic comments](https://webpack.js.org/api/module-methods/#magic-comments) to your dynamic `import()` expressions at build time.\n\n## Getting Started\n\nFirst install `magic-comments-loader`:\n\n```\nnpm install magic-comments-loader\n```\n\nNext add the loader to your `webpack.config.js` file:\n\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.jsx?$/,\n      use: ['magic-comments-loader']\n    }\n  ]\n}\n```\n\nThen given a **file.js** with the following import:\n\n```js\nconst dynamicModule = await import('./path/to/module.js')\n```\n\nWhile running `webpack` the dynamic import inside **file.js** becomes:\n\n```js\nconst dynamicModule = await import(/* webpackChunkName: \"path-to-module\" */ './path/to/module.js')\n```\n\nThe `webpackChunkName` comment is added by default when registering the loader. See the supported [options](#options) to learn about configuring other magic comments.\n\n\u003e **Rspack:** This loader is compatible with Rspack as well. Use the same configuration shape in your `rspack.config.js`.\n\n## Options\n\n* [`verbose`](#verbose)\n* [`mode`](#mode)\n* [`match`](#match)\n* [`comments`](#comments)\n* `[magicCommentName: string]: MagicCommentValue` see `magic-comments` [options](https://github.com/morganney/magic-comments#options) for details\n\n### `verbose`\n**type**\n```ts\nboolean\n```\n**default** `false`\n\nPrints console statements of the module filepath and updated `import()` during the webpack build. Useful for debugging.\n\n### `mode`\n**type**\n```ts\n'parser' | 'regexp'\n```\n**default** `'parser'`\n\nSets how the loader finds dynamic import expressions in your source code, either using an [ECMAScript parser](https://github.com/oxc-project/oxc/tree/main/crates/oxc_parser) (oxc-parser), or a regular expression. Your mileage may vary when using `'regexp'`.\n\n### `match`\n**type**\n```ts\n'module' | 'import'\n```\n**default** `'module'`\n\nSets how globs are matched, either the module file path, or the `import()` specifier.\n\n### `comments`\n**type**\n```ts\n'ignore' | 'prepend' | 'append' | 'replace'\n| (cmts: Array\u003c{ start: number; end: number; text: string }\u003e, magicComment: string) =\u003e string\n```\n**default** `'ignore'`\n\n_Note, this option is only applied when `mode` is `parser`._\n\n_Note, this option only considers block comments that precede the dynamic imports specifier, and any comments coming after are ignored and left intact._\n\nSets how dynamic imports with block comments are handled. If `ignore` is used, then it will be skipped and no magic comments from your configuration will be applied. If `replace` is used, then all found comments will be replaced with the magic comments. `append` and `prepend` add the magic comments after, or before the found comments, respectively.\n\nWhen a function is used it will be passed the found comments, and the magic comment string that is to be applied. The return value has the same effect as `replace`. There is an [example of using a function](https://github.com/morganney/magic-comments-loader/blob/main/__tests__/loader.spec.js#L1137-L1154) in the loader specification.\n\n## Examples\n\nBelow are examples for some of the supported magic comments. Consult the [loader specification](https://github.com/morganney/magic-comments-loader/blob/main/__tests__/loader.spec.js) for a comprehensive usage example.\n\n### webpackChunkName\n\nAdd `webpackChunkName` magic comments to dynamic imports matching the provided glob(s), using the import path in _kebab-case_ as the default chunk name. Glob matching is done using [micromatch](https://github.com/micromatch/micromatch).\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.[jt]sx?$/,\n      use: {\n        loader: 'magic-comments-loader',\n        options: {\n          webpackChunkName: ['**/src/**/*.js']\n        }\n      }\n    }\n  ]\n}\n```\n**src**\n```js\nimport('./folder/module.js')\n```\n**build**\n```js\nimport(/* webpackChunkName: \"folder-module\" */ './folder/module.js')\n```\n\nTo define a custom chunk name, use a function as the option value. Returning nothing, or a falsy value skips adding the comment.\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.[jt]sx?$/,\n      use: {\n        loader: 'magic-comments-loader',\n        options: {\n          webpackChunkName: (modulePath, importPath) =\u003e {\n            if (importPath.endsWith('module.js')) {\n              return 'custom-chunk-name'\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n**src**\n```js\nimport('./folder/module.js')\n```\n\n**build**\n```js\nimport(/* webpackChunkName: \"custom-chunk-name\" */ './folder/module.js')\n```\n\nFinally, using a [`CommentConfig`](https://github.com/morganney/magic-comments#commentconfig) object you can change the chunk name to the import specifier's basename (instead of the full hyphenated path). This could potentially result in name collisions, so be mindful of import specifiers when activating. You could also achieve the same thing by using a function instead of `options.basename`.\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.[jt]sx?$/,\n      use: {\n        loader: 'magic-comments-loader',\n        options: {\n          webpackChunkName: {\n            options: {\n              basename: true\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n**src**\n```js\nimport('./folder/module.js')\n```\n\n**build**\n```js\nimport(/* webpackChunkName: \"module\" */ './folder/module.js')\n```\n\nMost of the magic comments can be configured similarly, and **all** support configuration as a function with the signature `(modulePath: string, importPath: string) =\u003e any`, albeit the return type is checked at runtime for compliance with the expected values. Check out the [options](https://github.com/morganney/magic-comments#options) for `magic-comments` more details.\n\n### Multiple\n\nYou can add multiple magic comments.\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.js$/,\n      use: {\n        loader: 'magic-comments-loader',\n        options: {\n          webpackChunkName: true,\n          webpackMode: 'lazy',\n          webpackFetchPriority: (modulePath, importPath) =\u003e {\n            if (importPath.includes('priority')) {\n              return 'high'\n            }\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n**src**\n```js\nimport('./priority/module.js')\n```\n\n**build**\n```js\nimport(/* webpackChunkName: \"priority-module\", webpackMode: \"lazy\", webpackFetchPriority: \"high\" */ './priority/module.js')\n```\n\n### Overrides\n\nWhen using a [`CommentConfig`](https://github.com/morganney/magic-comments#commentconfig) object, you can override the configuration passed in the `options` key by defining `overrides`. It is an array of objects that look like:\n\n```ts\nArray\u003c{\n  files: string | string[];\n  options: CommentOptions;\n}\u003e\n```\n\nThe `files` and `options` keys are both required, where the former is a glob string, or an array thereof, and the latter is the associated magic comment's [`CommentOptions`](https://github.com/morganney/magic-comments#commentoptions).\n\nHere's a more complete example of how overrides can be applied:\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.js$/,\n      use: {\n        loader: 'magic-comments-loader',\n        options: {\n          match: 'import', // Now provided globs match against the import specifier\n          webpackChunkName: '*.json',\n          webpackMode: {\n            options: {\n              mode: 'lazy'\n            },\n            overrides: [\n              {\n                files: ['**/eager/**/*.js'],\n                options: {\n                  mode: 'eager'\n                }\n              },\n              {\n                files: ['**/locales/**/*.json'],\n                options: {\n                  mode: 'lazy-once'\n                }\n              }\n            ]\n          }\n        }\n      }\n    }\n  ]\n}\n```\n\n**src**\n```js\nconst lang = 'es'\nimport('./folder/module.js')\nimport('./eager/module.js')\nimport(`./locales/${lang}.json`)\n```\n\n**build**\n```js\nconst lang = 'es'\nimport(/* webpackMode: \"lazy\" */ './folder/module.js')\nimport(/* webpackMode: \"eager\" */ './eager/module.js')\nimport(/* webpackChunkName: \"locales-[request]\", webpackMode: \"lazy-once\" */ `./locales/${lang}.json`)\n```\n\nYou can also see the [example for overrides in `magic-comments`](https://github.com/morganney/magic-comments#overrides).\n\n### TypeScript\n\nWhen using TypeScript or experimental ECMAScript features \u003c= [stage 3](https://tc39.es/process-document/), i.e. non spec compliant, you must chain the appropriate loaders with `magic-comments-loader` coming after.\n\nFor example, if your project source code is written in TypeScript, and you use `babel-loader` to transpile and remove type annotations via `@babel/preset-typescript`, while `tsc` is used for type-checking only, chain loaders like this:\n\n**config**\n```js\nmodule: {\n  rules: [\n    {\n      test: /\\.[jt]sx?$/,\n      // Webpack loader chains are processed in reverse order, i.e. last comes first.\n      use: [\n        'magic-comments-loader',\n        'babel-loader'\n      ]\n    }\n  ]\n}\n```\n\nYou would configure `ts-loader` similarly, or any other loader that transpiles your source code into spec compliant ECMAScript.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Fmagic-comments-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmorganney%2Fmagic-comments-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmorganney%2Fmagic-comments-loader/lists"}