epegzz/modify-source-webpack-plugin

Plugin to modify module sources

modify-source-webpack-plugin

Webpack Plugin for modifying modules source.

Compatibility

Webpack Version	Plugin version	Status	Branch
^5.0.0	^2.0.0	✅	master
^4.37.0	^1.1.0	✅	1.x

Installation (webpack 5)

NPM

npm i -D modify-source-webpack-plugin@next

Yarn

yarn add -D modify-source-webpack-plugin@next

Installation (webpack 4)

NPM

npm i -D modify-source-webpack-plugin

Yarn

yarn add -D modify-source-webpack-plugin

Import

ES6/TypeScript

import { ModifySourcePlugin } from 'modify-source-webpack-plugin';

CJS

const { ModifySourcePlugin } = require('modify-source-webpack-plugin');

Usage

webpack.config.js

module.exports = {
  plugins: [new ModifySourcePlugin(options)]
};

Options

rules[].test

Type: RegExp | ((module: webpack.NormalModule) => boolean)

Required

test is RegExp or function, which used to determinate which modules should be modified.

RegExp will be applied to full module path (based on userRequest).

function will be applied to NormalModule.

Example with RegExp

module.exports = {
  plugins: [
    new ModifySourcePlugin({
      rules: [
        {
          test: /index\.js$/
        }
      ]
    })
  ]
};

Example with Function

module.exports = {
  plugins: [
    new ModifySourcePlugin({
      rules: [
        {
          test: module =>
            module.source().source().includes('my-secret-module-marker')
        }
      ]
    })
  ]
};

rules[].modify

Type: (source: string, filename: string) => string

Required

Function accept a source and filename. Should return a modified source.

WARNING: modify function should make syntax compatible changes, for example all unsupported syntax will break your build or create errors in runtime.

Example

module.exports = {
  plugins: [
    new ModifySourcePlugin({
      rules: [
        {
          test: /my-file\.js$/,
          modify: (src, filename) =>
            src +
            `\n\n// This file (${filename}) is written by me. All rights reserved`
        }
      ]
    })
  ]
};

Bad example (never do this)

module.exports = {
  plugins: [
    new ModifySourcePlugin({
      rules: [
        {
          test: /my-file\.js$/,
          modify: src => src + `haha I break your build LOL`
        }
      ]
    })
  ]
};

debug

Type: boolean