修改 - 源webpack-plugin
用于修改模块源的WebPack插件。
兼容性
| webpack版本 | 插件版本 | 地位 |
|---|---|---|
| ^5.0.0 | ^4.0.0 | ✅ |
| ^4.37.0 | ^4.0.0 | ✅ |
版本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 []（支持的串联，更换）
必需的
描述如何修改模块的操作列表。
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.nn'
) ,
new ConcatOperation (
'end' ,
'nn// 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' )
]
}
]
} )
]
} ;调试
类型：布尔值
为了更容易调试。在控制台中打印一些日志。
高级用法
编译时常数
与我们更改的有关文件的信息有关的常数。
| 持续的 | 描述 |
|---|---|
| $ file_path | 文件路径 |
| $ file_name | 文件名 |
plugins: [
new ModifySourcePlugin ( {
rules : [
{
test : / m y - f i l e . j s $ / ,
operations : [
new ConcatOperation (
'end' ,
'nn // This file is on the path - $FILE_PATH and filename - $FILE_NAME'
)
]
}
]
} )
] ;在文件内容之前和之后放置内容
my-file.js（可单击）
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.' )
]
}
]
} )
] ;结果my-file.js（可单击）
// Something before file contents.
console . log ( 'Hello world!' ) ;
// Something after file contents.用内容替换插头
my-component.jsx（可单击）
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')
]
}
]
} )
] ;结果my-component.jsx（可单击）
function HelloMessage ( props ) {
return (
< div >
Hello, Artem Batura
< button
onClick = { ( ) => {
props . userLogout ( ) ;
alert ( 'Goodbye, Artem Batura!' ) ;
} }
>
Exit
button >
div >
) ;
}将代码/文本片段放在所需位置
my-component.jsx（可单击）
function HelloMessage ( props ) {
$MY_DEBUG_CODE ;
return (
< div >
Hello, user! $MY_USER_COMPONENT
< button onClick = { ( ) => props . userLogout ( ) } > Exit button >
div >
) ;
}webpack.config.js
compilation-time markup
'
)
]
}
]
})
];">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' , 'compilation-time markup' ) ] } ] } ) ] ;
结果my-component.jsx（可单击）
function HelloMessage ( props ) {
console . log ( 'props' , props ) ;
return (
< div >
Hello, user!
< div > compilation-time markup div >
< button onClick = { ( ) => props . userLogout ( ) } > Exit button >
div >
) ;
}