背景

这是初稿，图稍后补上~

程序在开发的过程中，免不了打印调试用的日志，以及测试流程时伪造的数据。这些@L_489_0@是不能出现在生成环境上的。
这意味着在程序打包前，需要把相关@L_489_0@剔除掉。
这些事情用人手去做很麻烦，很容易疏漏。而且打包出来测试时遇到了bug，又得重新把测试@L_489_0@添加回去。重复整个繁琐的过程。

既然人工做这么麻烦而且@R_57_10197@，那能不能用程序帮我们完成这些事情呢？
当然可以，用选择性编译技术就行，本文就介绍在webpack下解决这一问题的方法。
其实这个方法在webpack官网就有提到，本文只是提供相关示例及做一些延伸。

选择性编译是笔者自己瞎想出来的名称，不知道用的对不对。

实践过程

首先，先让我们看一个选择性打印日志的示例。

• 新建一个vue项目
• 打开build/webpack.dev.conf.js文件（项目处于开发环境时使用到的webpack打包文件，运行npm run dev，这个文件就会被执行）

• 添加如下@L_489_0@

  new webpack.DefinePlugin({
      'process.env': config.dev.env,IS_DEV: JSON.Stringify(true),}),

• 打开build/webpack.prod.conf.js文件（项目打包时使用到的webpack打包文件，运行npm run build，这个文件就会被执行）

• 添加如下@L_489_0@

  new webpack.DefinePlugin({
      'process.env': config.dev.env,IS_DEV: JSON.Stringify(false),

• 打开src/main.js文件（项目入口文件，运行项目时被执行）

• 添加如下@L_489_0@

  if (IS_DEV) {
      console.log('this is dev env');
  } else {
      console.log('this is prod env');
  }

• 分别在开发环境和生成环境运行程序。查看控制台，我们发现在开发环境下，打印了this is dev env。在生成环境下打印了this is prod env。
• 打开打包出来的文件/dist/static/js/app.xxx.js，搜索this is prod env。我们发现IS_DEV编程了false。
• 同理，我们在开发环境下，查看chrome开发者工具，找到相应的app.xxx.js文件。我们发现IS_DEV编程了true。

由此我们可以知道

• 选择性编译本质上是字符串的替换，先经过DefinePlugin对@L_489_0@中的特定字符串进行替换。再将替换后的@L_489_0@交给webpack进行@L_489_0@编译。
• 需要替换的变量需要分别在webpack.dev.conf.js和webpack.prod.conf.js中指定其转换的意义。
• 为什么在mian.js中使用IS_DEV，程序不会报"IS_DEV is not defined"的错误？
  因为浏览器在运行@L_489_0@时，拿到的文件里面IS_DEV已经被替换成了true或者false,并不存在IS_DEV这个变量。所以不会报错。

DefinePlugin的使用说明

• 除了替换成简单的布尔值，还可以替换成字符串，数值，数组，对象等。
  如test_DATA: JSON.Stringify({name:'momo',age:18}),
• 为什么需要加上JSON.Stringify？
• 另外还可以替换成某个段@L_489_0@的值（@L_489_0@内容直接使用""包裹即可）。
  如：TWO: "1+1",TOW将被替换成这段@L_489_0@的结果，即2。

选择性编辑技术的应用场景

• API接口替换
• 账号信息的模拟，数据模拟
• 日志打印等

彩蛋

更优的去除log方法

用if逻辑判断来输出log可能略显繁琐，其实对于控制台输出的日志。我们可以通过UglifyJs在打包时来剔除掉。
具体操作：

• 打开build/webpack.prod.conf.js文件，添加如下语句

  compress: {
  warnings: false,// 去除warning警告
  drop_debugger: true,// 发布时去除debugger语句
  drop_console: true // 发布时去除console语句
  },

• 如果想只去除console.log保留console.error等错误提示。可以指定去除特定的函数

  compress: {
  warnings: false,// 去除warning警告
  pure_funcs: ['console.log'],// 配置发布时，不被打包的函数
  // drop_debugger: true,// 发布时去除debugger
  // drop_console: true // 发布时去除console
  }

去除条件编译中不可达@L_489_0@

• 什么叫不可达@L_489_0@？就是无论什么情况下都不会被运行的@L_489_0@。
  例如我们在条件编译打包出来的@L_489_0@中

  if (false) {
      console.log('this is dev env');
  } else {
      console.log('this is prod env');
  }

  console.log('this is dev env');就是不可达@L_489_0@。
  我们同样可以使用UglifyJs的功能把这部分无用@L_489_0@去除掉。让条件编译不留痕迹。
  具体配置如下：

  compress: {
      warnings: false,// 去除warning警告
      dead_code: true,// 去除不可达@L_489_0@
  },sourceMap: true

UglifyJs的更多功能

UglifyJs还用很多强大的功能，如@L_489_0@混淆，压缩，重拍版等。
这里附上UglifyJs官方网址。
英文不好的同学还可以查看对应的中文文档（其实这才是重点）。