{"id":17531349,"url":"https://github.com/artembatura/modify-source-webpack-plugin","last_synced_at":"2026-03-08T04:31:44.279Z","repository":{"id":36029285,"uuid":"169330668","full_name":"artembatura/modify-source-webpack-plugin","owner":"artembatura","description":"Simple webpack plugin for modifying modules source","archived":false,"fork":false,"pushed_at":"2023-10-05T03:59:39.000Z","size":101609,"stargazers_count":39,"open_issues_count":13,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-17T00:28:28.766Z","etag":null,"topics":["compilation","edit","file","modify","module","plugin","source","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/artembatura.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2019-02-05T23:43:20.000Z","updated_at":"2025-04-21T09:16:55.000Z","dependencies_parsed_at":"2024-06-18T15:20:27.111Z","dependency_job_id":"30a0624d-6bac-44ab-80c7-86fd89622123","html_url":"https://github.com/artembatura/modify-source-webpack-plugin","commit_stats":{"total_commits":70,"total_committers":6,"mean_commits":"11.666666666666666","dds":"0.48571428571428577","last_synced_commit":"3210fd4cf19d4f18d75236b9694b82c5d285d7ff"},"previous_names":["artemirq/modify-source-webpack-plugin"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/artembatura/modify-source-webpack-plugin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artembatura%2Fmodify-source-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artembatura%2Fmodify-source-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artembatura%2Fmodify-source-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artembatura%2Fmodify-source-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/artembatura","download_url":"https://codeload.github.com/artembatura/modify-source-webpack-plugin/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/artembatura%2Fmodify-source-webpack-plugin/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30245220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-08T00:58:18.660Z","status":"online","status_checked_at":"2026-03-08T02:00:06.215Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["compilation","edit","file","modify","module","plugin","source","webpack"],"created_at":"2024-10-20T17:23:36.002Z","updated_at":"2026-03-08T04:31:44.261Z","avatar_url":"https://github.com/artembatura.png","language":"TypeScript","readme":"[![npm version](https://img.shields.io/npm/v/modify-source-webpack-plugin.svg)](https://www.npmjs.com/package/modify-source-webpack-plugin)\n![npm version](https://img.shields.io/npm/dm/modify-source-webpack-plugin.svg)\n![npm version](https://img.shields.io/npm/dt/modify-source-webpack-plugin.svg)\n![npm version](https://img.shields.io/snyk/vulnerabilities/npm/modify-source-webpack-plugin.svg)\n![npm version](https://img.shields.io/librariesio/release/npm/modify-source-webpack-plugin.svg)\n[![npm version](https://img.shields.io/npm/l/modify-source-webpack-plugin.svg)](https://github.com/artembatura/modify-source-webpack-plugin)\n\n# [modify-source-webpack-plugin](https://www.npmjs.com/package/modify-source-webpack-plugin)\n\nWebpack plugin for modifying modules source.\n\n## Compatibility\n\n| Webpack Version | Plugin version | Status                   |\n| --------------- | -------------- | ------------------------ |\n| ^5.0.0          | ^4.0.0         | \u003cp align=\"center\"\u003e✅\u003c/p\u003e |\n| ^4.37.0         | ^4.0.0         | \u003cp align=\"center\"\u003e✅\u003c/p\u003e |\n\n## [Migration guide](https://github.com/artembatura/modify-source-webpack-plugin/blob/master/CHANGELOG.md#migration-guide-3x-to-4x) from version 3\n\n## Installation\n\n### NPM\n\n```\nnpm i -D modify-source-webpack-plugin\n```\n\n### Yarn\n\n```\nyarn add -D modify-source-webpack-plugin\n```\n\n## Import\n\n### ES6/TypeScript\n\n```js\nimport { ModifySourcePlugin } from 'modify-source-webpack-plugin';\n```\n\n### CJS\n\n```js\nconst { ModifySourcePlugin } = require('modify-source-webpack-plugin');\n```\n\n## Usage\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n  plugins: [new ModifySourcePlugin(options)]\n};\n```\n\n## Options\n\n### `rules[].test`\n\nType: `RegExp | ((module: webpack.NormalModule) =\u003e boolean)`\n\n`Required`\n\n`test` is RegExp or function, which used to determinate which modules should be modified.\n\n`RegExp` will be applied to full module path (based on `userRequest`).\n\n`function` will be applied to `NormalModule`.\n\n#### Example with RegExp\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: /index\\.js$/\n      }\n    ]\n  })\n];\n```\n\n#### Example with Function\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: module =\u003e\n          module.source().source().includes('my-secret-module-marker')\n      }\n    ]\n  })\n];\n```\n\n### `rules[].operations`\n\nType: `AbstractOperation[]` (supported `ConcatOperation`, `ReplaceOperation`)\n\n`Required`\n\nList of operations which describes how modules should be modified.\n\n:warning: Operations should make syntax compatible changes. For example all unsupported syntax will break your build or create errors in runtime.\n\n#### Example with concat operation\n\n```js\nimport {\n  ModifySourcePlugin,\n  ConcatOperation\n} from 'modify-source-webpack-plugin';\n\nmodule.exports = {\n  plugins: [\n    new ModifySourcePlugin({\n      rules: [\n        {\n          test: /my-file\\.js$/,\n          operations: [\n            new ConcatOperation(\n              'start',\n              '// Proprietary and confidential.\\n\\n'\n            ),\n            new ConcatOperation(\n              'end',\n              '\\n\\n// File is written by me, January 2022'\n            )\n          ]\n        }\n      ]\n    })\n  ]\n};\n```\n\n#### Example with replace operation\n\n```js\nimport {\n  ModifySourcePlugin,\n  ReplaceOperation\n} from 'modify-source-webpack-plugin';\n\nmodule.exports = {\n  plugins: [\n    new ModifySourcePlugin({\n      rules: [\n        {\n          test: /my-file\\.js$/,\n          operations: [\n            new ReplaceOperation('once', 'searchValue', 'replaceValue'),\n            new ReplaceOperation('all', 'searchValue', 'replaceValue')\n          ]\n        }\n      ]\n    })\n  ]\n};\n```\n\n#### Bad example\n\n```js\nmodule.exports = {\n  plugins: [\n    new ModifySourcePlugin({\n      rules: [\n        {\n          test: /my-file\\.js$/,\n          operations: [\n            new ConcatOperation('start', 'Haha I break your build LOL')\n          ]\n        }\n      ]\n    })\n  ]\n};\n```\n\n### `debug`\n\nType: `boolean`\n\nFor easier debugging. Print some logs in the console.\n\n## Advanced Usage\n\n### Compile-time constants\n\nConstants related to information about files that we change.\n\n| Constant     | Description  |\n| ------------ | ------------ |\n| `$FILE_PATH` | Path to file |\n| `$FILE_NAME` | File name    |\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: /my-file\\.js$/,\n        operations: [\n          new ConcatOperation(\n            'end',\n            '\\n\\n // This file is on the path - $FILE_PATH and filename - $FILE_NAME'\n          )\n        ]\n      }\n    ]\n  })\n];\n```\n\n### Put content before and after file contents\n\n\u003cdetails\u003e\n  \u003csummary\u003emy-file.js (clickable)\u003c/summary\u003e\n\n```js\nconsole.log('Hello world!');\n```\n\n\u003c/details\u003e\n\n`webpack.config.js`\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: /my-file\\.js$/,\n        operations: [\n          new ConcatOperation('start', '// Something before file contents.\\n'),\n          new ConcatOperation('end', '\\n// Something after file contents.')\n        ]\n      }\n    ]\n  })\n];\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eResult my-file.js (clickable)\u003c/summary\u003e\n\n```js\n// Something before file contents.\nconsole.log('Hello world!');\n// Something after file contents.\n```\n\n\u003c/details\u003e\n\n### Replace plug with a content\n\n\u003cdetails\u003e\n  \u003csummary\u003emy-component.jsx (clickable)\u003c/summary\u003e\n\n```jsx\nfunction HelloMessage(props) {\n  return (\n    \u003cdiv\u003e\n      Hello, $NAME\n      \u003cbutton\n        onClick={() =\u003e {\n          props.userLogout();\n          alert('Goodbye, $NAME!');\n        }}\n      \u003e\n        $EXIT_LABEL\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n\n`webpack.config.js`\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: /my-component\\.jsx$/,\n        operations: [\n          new ReplaceOperation('all', '$NAME', 'Artem Batura'),\n          new ReplaceOperation('once', '$EXIT_LABEL', 'Exit')\n          // new ReplaceOperation('once', '$EXIT_LABEL', 'Leave')\n        ]\n      }\n    ]\n  })\n];\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eResult my-component.jsx (clickable)\u003c/summary\u003e\n\n```jsx\nfunction HelloMessage(props) {\n  return (\n    \u003cdiv\u003e\n      Hello, Artem Batura\n      \u003cbutton\n        onClick={() =\u003e {\n          props.userLogout();\n\n          alert('Goodbye, Artem Batura!');\n        }}\n      \u003e\n        Exit\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n\n### Place code/text fragment in required position\n\n\u003cdetails\u003e\n  \u003csummary\u003emy-component.jsx (clickable)\u003c/summary\u003e\n\n```jsx\nfunction HelloMessage(props) {\n  $MY_DEBUG_CODE;\n\n  return (\n    \u003cdiv\u003e\n      Hello, user! $MY_USER_COMPONENT\n      \u003cbutton onClick={() =\u003e props.userLogout()}\u003eExit\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n\n`webpack.config.js`\n\n```js\nplugins: [\n  new ModifySourcePlugin({\n    rules: [\n      {\n        test: /my-component\\.js$/,\n        operations: [\n          new ReplaceOperation(\n            'once',\n            '$MY_DEBUG_CODE',\n            'console.log(\"props\", props)'\n          ),\n          new ReplaceOperation(\n            'once',\n            '$MY_USER_COMPONENT',\n            '\u003cdiv\u003ecompilation-time markup\u003c/div\u003e'\n          )\n        ]\n      }\n    ]\n  })\n];\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003eResult my-component.jsx (clickable)\u003c/summary\u003e\n\n```jsx\nfunction HelloMessage(props) {\n  console.log('props', props);\n\n  return (\n    \u003cdiv\u003e\n      Hello, user!\n      \u003cdiv\u003ecompilation-time markup\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e props.userLogout()}\u003eExit\u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\u003c/details\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartembatura%2Fmodify-source-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fartembatura%2Fmodify-source-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fartembatura%2Fmodify-source-webpack-plugin/lists"}