前端硬件开发环境与生产测试环境的区别

开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。

测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。

生产环境：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志。

三个环境也可以说是系统开发的三个阶段：开发->测试->上线，其中生产环境也就是通常说的真实环境。相关文章：《项目中的软硬件开发环境与工具指的是什么？》

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

在开发时，不可避免会产生大量debug又或是测试的代码，这些代码不应出现在生产环境中（也即不应提供给用户）。

在把页面部署到服务器时，为了追求极致的技术指标，我们会对代码进行各种各样的优化，比如说混淆、压缩，这些手段往往会彻底破坏代码本身的可读性，不利于我们进行debug等工作。
 

 

数据源的差异化，比如说在本地开发时，读取的往往是本地mock出来的数据，而正式上线后读取的自然是API提供的数据了。

如果硬是要在开发环境和生产环境用完全一样的代码，

那么必然会付出沉重的代价，这点想必也不用多说了。

─webpack.config.js# 生产环境的webpack配置文件（无实质内容，仅为组织整理）

dependences是项目正常运行所需要的依赖，而devDependencies则是开发者开发时整个项目所需的依赖（如会有一些测试依赖之类的）。

会默认安装两种依赖。

如果你只是单纯的想使用这个包而不需要进行一些改动测试之类的操作，则运行：（只安装dependencies而不安装devDependencies。）

npminstall--production

如果想要安装devDependencies,则运行：

npminstallpackagename--dev

dependencies就是你程序跑起来需要的模块，没有这个模块你程序就会报错。

devDependencies见命知意了，开发程序的时候需要的模块了。

举个例子，你用angularjs框架开发一个程序，开发阶段需要用到gulp来构建你的开发和本地运行环境。所以angularjs一定要放到dependencies里，因为以后程序到生产环境也要用。gulp则是你用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，所以放到dev里就ok了。

再深入一些，你写程序要用ES6标准，浏览器并不完全支持，所以你要用到babel来转换代码。程序里有消息提示，你想用toaster。同样一个开发用，一个运行用。所以babel放dev，toaster放dependencies。

希望你理解了！

简单一些可以：

dependencies存放项目或组件代码中依赖到的

devDependencies存放测试代码依赖的包或构建工具的包

如果你使用了一些构建工具，比如webpack之类的，打包的时候，是不会把dev库打进去的。

devDependencies 通常用来放我们开发时所用到的工具，比如 Webpack，Gulp，babel等。devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

浏览器并不会实际的去同步加载这个模块，require的处理是由Webpack进行解析和打包的，浏览器只需要执行打包后的代码。

将Webpack开发服务器集成到已有服务器

尽管Webpack开发服务器可以直接用于开发，但实际项目中我们可能必须使用自己的Web服务器。这就需要我们能将Webpack的服务集成到已有服务器，来使用Webpack提供的模块打包和加载功能。要实现这一点其实非常容易，只需要在载入打包文件时指定完整的URL地址，例如：

这就告诉当前页面应该去另外一个服务器获得脚本资源文件，在之前我们已经在配置文件中指定了开发服务器的地址，因此打包后的文件也知道应该通过哪个地址去建立Socket IO来动态加载模块。