webpack-replace-loader

一个 webpack 打包时用来替换字符串的 webpack-loader 。

中文文档　　 English document

使用场景举例

1 . 在使用 webpack 项目打包的时候，用来将开发环境的请求 URL 替换为 生产环境的 URL 。

2 . 项目统一查找调整页面配色样式 color , 将 #00ff00 替换为 #ff0700 。

3 . 大型项目中，依照打包策略在相关文件中写入不同内容。

与 webpack 版本关系

webpack v5，请安装Tag: v5.0.0+ webpack v4，请安装Tag: v4.0.0+ （正在编写中） webpack v3，请安装Tag: v1.0.0+

安装

将 webpack-replace-loader 作为依赖安装到项目:

1 npm install webpack-replace-loader --save-dev

配置使用

配置webpack打包策略：

1module: {
2  loaders: [
3    ...
4    {
5      test: /test\.js$/,
6      loader: 'webpack-replace-loader',
7      options: {
8        arr: [
9          {search: '$BaseUrl', replace: 'https://test.baiduu.com', attr: 'g'},
10          {search: '$Title', replace: '百度一下，你就知道', attr: 'g'}
11        ]
12      }
13    }
14    ...
15  ]
16}

示例

test.js :

1 var title = '$Title';
2 function showTitle () {
3   document.title = title;
4 }

通过以上 webpack 配置打包后生成 test.js ：

1var title = '百度一下，你就知道核心价值观';
2function showTitle() {
3  document.title = title;
4}

在上例中，$Title 的作用仅仅是提供一个查找字符串的 锚点 ，并没有实际意义。

Webpack 的其他配置方法

1 . 将 a.js 中的 BaseUrl 只替换第一个为 https://www.baidu.com/api/ ; Title 全部替换为 " 百度开放接口 " 。

2 . 将 b.js 中的 Location 全部替换为 " BeiJing " 。

1module: {
2  loaders: [
3    ...
4    {
5      test: /a\.js$/,
6      loader: 'webpack-replace-loader',
7      options: {
8        arr: [
9          {search: 'BaseUrl', replace: 'https://www.baidu.com/api/'},
10          {search: 'Title', replace: '百度开放接口', attr: 'g'}
11        ]
12      }
13    },
14    {
15      test: /b\.js$/,
16      loader: 'webpack-replace-loader',
17      options: {
18        search: 'Location',
19        replace: 'https://www.baidu.com/api/',
20        attr: 'g'
21      }
22    }
23    ...
24  ]
25}

只要你的替换锚点不相同，你也可以合并写：

1module: {
2  loaders: [
3    ...
4    {
5      test: /(a\.js|b.js|c\.js)$/,
6      loader: 'webpack-replace-loader',
7      options: {
8        arr: [
9          {search: 'BaseUrl', replace: 'https://www.baidu.com/api/'},
10          {search: 'Title', replace: '百度开放接口', attr: 'g'}
11          {search: 'Location', replace: 'BeiJing', attr: 'g'}
12        ]
13      }
14    }
15    ...
16  ]
17}

包括 .css 文件，.less 文件等 ： 将color: red; 修改为 color: #0cff00;

1.test {
2  color: red;
3}

配置：

1options: {
2  search: 'color: red;',
3  replace: 'color: #0cff00;',
4  attr: 'g'
5}

替换后：

1.test {
2  color: #0cff00;
3}

将 a.hml 文件 的 div 标签换为 span 标签。将 class text 换为 box :

1<span>$DOM</span>

配置如下：

1options: {
2  arr: [
3    {search: 'span', replace: 'div', attr: 'g'},
4    {search: '$DOM', replace: `
5      <span class="box">
6        <span class="text">百度一下，你就知道</span>
7      </span>
8    `}
9  ]
10}

替换后：

1<div>
2  <span class="box">
3    <span class="text">百度一下，你就知道</span>
4  </span>
5</div>

测试

在 test 目录下进行执行：

1 npm install

1 npm run test

用浏览器打开：test/dist/index.html。

说明

1.2版本后，已做全字符转义，包含但不限于下列情况均可替换。

1search: '<a class__';
2search: '.a /bcc .g';
3search: '[.a]';
4search: '--{a-x}';
5search: '({[list]})';
6search: '/$/abb^';
7search: '<c><d></>';
8search: '?+^$@><-';