webpack开发环境和生产环境分离

开发环境与生产环境分离的原因如下：

• 在开发时，不可避免会产生大量debug又或是测试的代码，这些代码不应出现在生产环境中（也即不应提供给用户）。
• 在把页面部署到服务器时，为了追求极致的技术指标，我们会对代码进行各种各样的优化，比如说混淆、压缩，这些手段往往会彻底破坏代码本身的可读性，不利于我们进行debug等工作。
• 数据源的差异化，比如说在本地开发时，读取的往往是本地mock出来的数据，而正式上线后读取的自然是API提供的数据了。

主要针对两点来介绍如何分离开发环境和生产环境：一是如何以不同的方式进行编译，也即如何分别形成开发环境及生产环境的webpack配置文件；二是在业务代码中如何根据环境的不同而做出不同的处理。

1.如何分离开发环境和生产环境的webpack配置文件

• 根据需求分成两套webpack.config.js和webpack.production.config.js两个配置文件
• 分别调用开发/生产环境的配置文件
  可以配合上npm scripts来使用，在package.json里定义：

"scripts": {
    "start": 开发的配置,
    "dev":开发的配置,
    "build":生产的配置
  },

这样一来，当我们开发的时候就可以使用npm run dev或npm run watch，而到要上线打包的时候就运行npm run build。

2.业务代码如何判断生产/开发环境

if (IS_PRODUCTION) {
    // 做生产环境该做的事情
} else {
    // 做开发环境该做的事情
}