0.0.2 • Published 4 years ago
source-replace-plugin v0.0.2
source-replace-plugins
一个文件代码替换webpack插件。
插件功能:将原文件中设置的特殊字符串,替换成对应文件的代码;
usage
// webpackConfig/webpack.config.js
plugins: [
new SourceReplace({
basePath: path.join(__dirname, '..'),
sourcePath: path.join(__dirname, '../src/run.js'),
targetPath: path.join(__dirname, '../dist/js/run.bundle.js'),
replaceMode: 'js'
})
]
- basePath:必填;项目根路径,在sourcePath的文件中,所有匹配到的字符串的文件路径都是以这个为基准的,可参考下面的demo。
- sourcePath:必填;需要替换的文件路径;
- targetPath:必填;替换后输出的文件路径;
- replaceMode:选填;默认为js;插件中预设的替换模式,暂时只有js模式;
- templateReg:选填;字符串匹配正则;匹配sourcePath文件中需要替换的字符串;如果replaceMode设置了js,则templateReg默认会被配置成/\@\{\{\{([^\}]+)\}\}\}/gi。
- replaceFunc:选填;替换处理函数;可以将读入的文件进行自定义处理之后再写入;如果replaceMode设置了js,则replaceFunc默认会被设置成如下函数:
replaceFunc = function (bundleFileCode, targetStr) {
let code = ''
code = bundleFileCode.replace(/\\/gi, '\\\\')
code = code.replace(/"/gi, '\\"')
return code
}
其中 bundleFileCode 为字符串匹配到的文件的代码,targetStr 为匹配到的文锦啊的字符串。
Demo
将run.js文件中的@{{{dist/js/run.bundle.js}}}字符串,替换成dist/js/run.bundle.js文件的所有代码;
// run.js
function createScriptDom (content) {
var dom = document.createElement('script')
dom.setAttribute('type', 'text/javascript')
dom.innerText = scriptContent
document.head.appendChild(dom)
}
createScriptDom("@{{{./dist/js/run.bundle.js}}}")
// webpackConfig/webpack.config.js
module.exports = {
...
plugins: [
new SourceReplace({
basePath: path.join(__dirname, '..'),
sourcePath: path.join(__dirname, '../src/run.js'),
targetPath: path.join(__dirname, '../dist/js/run.bundle.js'),
replaceMode: 'js'
})
]
}