modify source webpack plugin

修改 – 源webpack–plugin

用于修改模块源的WebPack插件。

兼容性

版本3的迁移指南

安装

NPM

npm i -D modify-source-webpack-plugin

纱

yarn add -D modify-source-webpack-plugin

进口

ES6/打字稿

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

CJS

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

用法

webpack.config.js

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

选项

规则[]。测试

类型：Regexp | （（模块：webpack.normalmodule）=> boolean）

必需的

测试是REGEXP或功能，用于确定应修改哪些模块。

REGEXP将应用于完整的模块路径（基于UserRequest）。

函数将应用于正常模块。

Regexp的示例

plugins: [
  new ModifySourcePlugin ( {
    rules : [
      {
        test : / i n d e x \\. j s $ /
      }
    ]
  } )
] ; 

具有函数的示例

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

规则[]。操作

类型：AbstractOperation []（支持的串联，更换）

必需的

描述如何修改模块的操作列表。

配x操作应进行语法兼容的更改。例如，所有不支持的语法都会破坏您的构建或在运行时创建错误。

Concat操作的示例

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

module . exports = {
  plugins : [
    new ModifySourcePlugin ( {
      rules : [
        {
          test : / m y - f i l e \\. j s $ / ,
          operations : [
            new ConcatOperation (
              \'start\' ,
              \'// Proprietary and confidential.\\n\\n\'
            ) ,
            new ConcatOperation (
              \'end\' ,
              \'\\n\\n// File is written by me, January 2022\'
            )
          ]
        }
      ]
    } )
  ]
} ; 

替换操作的示例

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

module . exports = {
  plugins : [
    new ModifySourcePlugin ( {
      rules : [
        {
          test : / m y - f i l e \\. j s $ / ,
          operations : [
            new ReplaceOperation ( \'once\' , \'searchValue\' , \'replaceValue\' ) ,
            new ReplaceOperation ( \'all\' , \'searchValue\' , \'replaceValue\' )
          ]
        }
      ]
    } )
  ]
} ; 

坏例子

 module . exports = {
  plugins : [
    new ModifySourcePlugin ( {
      rules : [
        {
          test : / m y - f i l e \\. j s $ / ,
          operations : [
            new ConcatOperation ( \'start\' , \'Haha I break your build LOL\' )
          ]
        }
      ]
    } )
  ]
} ;

调试

类型：布尔值

为了更容易调试。在控制台中打印一些日志。

高级用法

编译时常数

与我们更改的有关文件的信息有关的常数。

plugins: [
  new ModifySourcePlugin ( {
    rules : [
      {
        test : / m y - f i l e \\. j s $ / ,
        operations : [
          new ConcatOperation (
            \'end\' ,
            \'\\n\\n // This file is on the path - $FILE_PATH and filename - $FILE_NAME\'
          )
        ]
      }
    ]
  } )
] ;

在文件内容之前和之后放置内容

 console . log ( \'Hello world!\' ) ;

webpack.config.js

plugins: [
  new ModifySourcePlugin ( {
    rules : [
      {
        test : / m y - f i l e \\. j s $ / ,
        operations : [
          new ConcatOperation ( \'start\' , \'// Something before file contents.\\n\' ) ,
          new ConcatOperation ( \'end\' , \'\\n// Something after file contents.\' )
        ]
      }
    ]
  } )
] ;

 // Something before file contents.
console . log ( \'Hello world!\' ) ;
// Something after file contents.

用内容替换插头

 function HelloMessage ( props ) {
  return (
    < div >
      Hello, $NAME
      < button
        onClick = { ( ) => {
          props . userLogout ( ) ;
          alert ( \'Goodbye, $NAME!\' ) ;
        } }
      >
        $EXIT_LABEL
      </ button >
    </ div >
  ) ;
}

webpack.config.js

plugins: [
  new ModifySourcePlugin ( {
    rules : [
      {
        test : / m y - c o m p o n e n t \\. j s x $ / ,
        operations : [
          new ReplaceOperation ( \'all\' , \'$NAME\' , \'Artem Batura\' ) ,
          new ReplaceOperation ( \'once\' , \'$EXIT_LABEL\' , \'Exit\' )
          // new ReplaceOperation(\'once\', \'$EXIT_LABEL\', \'Leave\')
        ]
      }
    ]
  } )
] ;

 function HelloMessage ( props ) {
  return (
    < div >
      Hello, Artem Batura
      < button
        onClick = { ( ) => {
          props . userLogout ( ) ;

          alert ( \'Goodbye, Artem Batura!\' ) ;
        } }
      >
        Exit
      </ button >
    </ div >
  ) ;
}

将代码/文本片段放在所需位置

 function HelloMessage ( props ) {
  $MY_DEBUG_CODE ;

  return (
    < div >
      Hello, user! $MY_USER_COMPONENT
      < button onClick = { ( ) => props . userLogout ( ) } > Exit </ button >
    </ div >
  ) ;
}

webpack.config.js

plugins: [
  new ModifySourcePlugin ( {
    rules : [
      {
        test : / m y - c o m p o n e n t \\. j s $ / ,
        operations : [
          new ReplaceOperation (
            \'once\' ,
            \'$MY_DEBUG_CODE\' ,
            \'console.log(\"props\", props)\'
          ) ,
          new ReplaceOperation (
            \'once\' ,
            \'$MY_USER_COMPONENT\' ,
            \'<div>compilation-time markup</div>\'
          )
        ]
      }
    ]
  } )
] ;

 function HelloMessage ( props ) {
  console . log ( \'props\' , props ) ;

  return (
    < div >
      Hello, user!
      < div > compilation-time markup </ div >
      < button onClick = { ( ) => props . userLogout ( ) } > Exit </ button >
    </ div >
  ) ;
}