English | 简体中文
为了一次打包后布署多个环境,通过配置项,用字符串替换的方法从打包文件生成多个bundles
-- by 客如云前端团队 keruyun.com
npm i -D webpack-plugin-create-multiple-bundle-from-string-replace
const MultipleBundle = require('webpack-plugin-create-multiple-bundle-from-string-replace');
const config = {
plugins: [
new MultipleBundle({ // 必填参数
targetOne: [
['HOST_API', 'HOST_CDN'], // find , 也支持正则 /HOST_API/
['//targetOne.you-company.com/api', '//targetOne.you-company.com/cdn'], // replace
],
targetTwo: [
['HOST_API', 'HOST_CDN'],
['//targetTwo.you-company.com/api', '//targetTwo.you-company.com/cdn'],
],
},
{ // 可选参数
sourcePath: 'xxx/xxx', // 默认为空, 使用 webpack.config.output.path
distPath: 'xxx/xxx', // 默认为空, 使用 webpack.config.output.path/multiple-bundle-from-string-replace
replaceExtname: ['txt'], // 默认为 ['html', 'htm', 'css', 'js', 'jsx','json', 'md'] , 与默认值 merge
}),
],
};
你将获得两个bundles目录(targetOne, targetTwo)里面所有文本文件都将被以上配置替换:
${webpack.config.output.path}/multiple-bundle-from-string-replace/(targetOne|targetTwo)
dist
├── ...originOutput
│
└── multiple-bundle-from-string-replace
├── targetOne
│ ├── ...replacedOutput
│ └── ...replacedOutput
└── targetTwo
├── ...replacedOutput
└── ...replacedOutput
const MultipleBundle = require('webpack-plugin-create-multiple-bundle-from-string-replace');
const config = {
plugins: [
new MultipleBundle([
['HOST_API', 'HOST_CDN'], // find , may contain Regular Expressions, /HOST_API/
['//targetOne.you-company.com/api', '//targetOne.you-company.com/cdn'], // replace
]),
],
};
原始bundles目录(dist)里面所有文本文件都将被以上配置替换:
${webpack.config.output.path}/
dist
└── ...replacedOutput
'HOST_API' => '//targetOne.you-company.com/api'
'HOST_CDN' => '//targetOne.you-company.com/cdn'
使用了第三方库 replace-once.
replaceOnce(fileContent, find, replace, 'g');
var str = 'abc abcd a ab';
var find = ['abcd', 'abc', 'ab', 'a'];
var replace = ['a', 'ab', 'abc', 'abcd'];
replaceOnce(str, find, replace, 'g');
//=> 'ab a abcd abc'
感谢: https://github.com/kodie/replace-once
MIT. See the license.md file for more info.