raw-edit-loader

A loader for webpack, support modify source string. Through the configuration of a series of properties, to modify the matching string.

usage

npm i -D raw-edit-loader

General configuration:

// src/index.js
console.log('Hello world!')

// webpack.config.js
{
  test: /\.js$/,
  use: ['babel-loader', {
    loader: 'raw-edit-loader',
    options: {
      // pathList: [path.resolve(__dirname, './src/index.js')],
      pathReg: /src\/index.js/,
      replaceReg: /Hello/,
      replacement: 'Hi, ',
      done: function(source) {
        return source
      },
    }
  }],
}

Before passing in the next loader, the source will be modified to：

// source string
console.log('Hi, wold!')

or group matching:

// webpack.config.js
{
  test: /\.js$/,
  use: ['babel-loader', {
    loader: 'raw-edit-loader',
    options: {
      group: [
        {
          pathReg: /src\/index.js/,
          replaceReg: /Hello/,
          replacement: 'Hi, ',
          done: function(source) {
            return source
          },
        }
      ]
    }
  }],
}

options

pathList [array]

Matching file absolute path list. If pathReg configured, the property will be invalid.

{
  pathList: ['/path/to/index.js', '/path/to/b.js']
}

pathReg [RegExp]

Matching file path regular expression. If pathList configured, the property will be invalid.

{
  pathReg: /src\/index.js/,
}

replaceReg [RegExp]

Match the source string regular expression and the hit fragment will be replaced.

{
  replaceReg: /Hello/,
}

replacement [string | Function]

Match the source string regular expression and the hit fragment will be replaced. string.replace(replaceReg, replacement)

{
  replacement: 'Hi, ',
}

group [array]

If the matching group is configured, the single mode property will be invalid

{
  group: [
    {
      pathReg: /src\/index.js/,
      replaceReg: /Hello/,
      replacement: 'Hi, ',
      done: function(source) {
        return source
      },
    },
    {
      pathReg: /src\/a.js/,
      replaceReg: /May/,
      replacement: 'Can',
      done: function(source) {
        return source
      },
    }
  ]
}

done [Function]

After the source operation is completed, the done method is called. Need return source.

{
  done: function(source) {
    return `${source};console.log('hello world')`
  },
}