Skip to content

Latest commit

 

History

History
108 lines (86 loc) · 2.83 KB

File metadata and controls

108 lines (86 loc) · 2.83 KB

English | 简体中文

webpack-plugin-create-multiple-bundle-from-string-replace

为了一次打包后布署多个环境,通过配置项,用字符串替换的方法从打包文件生成多个bundles

-- by 客如云前端团队 keruyun.com

安装

npm i -D webpack-plugin-create-multiple-bundle-from-string-replace

用法

方法 1:

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

方法 2:

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

License

MIT. See the license.md file for more info.