使用webpack-replace-loader插件进行版本控制

1、webpack-replace-loader

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

2、常规使用（下载、安装、配置）

githab-中文文档

3、使用场景

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

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

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

以上说白了就是 用webpack-replace-loader 插件可以把文件中的内容A替换成你想要的内容B。

4、版本控制

（1） 比如一个项目想切换成两个版本，version1 和 version2。那可以把version1 的HTML代码放在

中间，把version1 的JS代码放在

中间。同理，version2 的代码放在version2 相关的注释中。

（2）然后在 webpack.base.js 如下配置，

{
   loader: 'webpack-replace-loader',
   options: {
     arr: [      
       {      //  <!--version1-begin-->   <!--version1-end-->
         search: /<!--version1-begin-->[\s\S]*?<!--version1-end-->/g ,replace:''
       },
       {     //  //version1-begin   //version1-end     
         search: /\/\/version1-begin[\s\S]*?\/\/version1-end/g ,replace:''
       },
       {    //  <!--version2-begin-->   <!--version2-end-->
          search: /<!--version2-begin-->[\s\S]*?<!--version2-end-->/g ,replace:''
       },
       {    //  //version2-begin   //version2-end
          search: /\/\/version2-begin[\s\S]*?\/\/version2-end/g ,replace:''
       }
     ]
   }
 }

（3）如果起version1 的项目，则注释version1，放开version2。这样，version2 相关的代码会被替换为空‘’，程序运行保留的version1 的代码，version1 就起来了。起version2 的项目操作反之。