webpack——生产环境介绍

环境的区分

   在之前的webpack文章中，我们介绍的都是webpack开发环境的配置，这一篇我们对之前的开发环境大致的做出总结，
   并且介绍比较另一个比较重要滴 构建环境 的一些配置。

其实在之前的一篇文章里面，就大致的介绍了一下开发环境和生产环境的区别了

选项	描述(自动)	特点
deveLopent（开发模式）	会将process.env.NODE_ENV的值设为devlopment。启用NamedChunksPlugin和NamedModulesPlugin	能让代码本地测试运行的环境
production （生产模式）	会将process.env.NODE_ENV的值设为production 启用 FlagDependencyUsagePlugin、flagincludeChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectSflagPlugin和UglifYjsPlugin	能让代码优化上线运行的环境

没错就是五大核心模块的 Mode 模块

但是这之前我们只做了webpakc Mode 开发环境的介绍和对应的文件配置规则等等，接下来的话，会分享出一些构建环境的配置和介绍。

开发环境总结

这里我们知道所谓的开发环境呢，其实就是让我们的代码可以在本地调试并可以成功并且正确的运行的环境

这里我们说的详细点，就是可以把我们写的源代码（es6的语法，scss文件，less文件，ts文件，jsx文件 ~~ ）经过我们webpakc的处理，打包成最后浏览器认识的build文件了。

我们的目的就是来搭建这可以让浏览器认识的webpack！

为了方便我们开发人员更加轻松，更加方便的来编译这些源代码，我们其实做了很多的操作都是为了方便我们更加效率的开发。

比如：

自动打开浏览器 👍
热替换 👍
热更新 👍
自动编译
自动打包
精灵图自动合成
对应的环境删除对应的console.log 👍
。。。还有很多可以提高开发效率

生产环境介绍

在上面的表格提到了我们所谓的生产环境呢，其实就是线上代码运行的环境。
我们需要让代码在线上环境能够展现出最好的运行效果。

这里我们就提到了尤为重要的项目优化了，优化项目让我们的代码变动小巧且快捷

这里我举一个之前听到过的例子:

我们知道 我们的css-loader会把css变成commconjs，里面全是我们所谓的样式字符串，这样会有一个坏处，导致我们的js体积
变的非常的庞大，下载速度就变的非常的慢，慢的话会造成什么问题呢， 首页因为他是先加载js，通过js来创建来创建script标
签，这个时候就会造成闪频问题!   这里我们可以把css文件单独抽离出来

这个时候呢就需要我们针对于代码进行一部分的优化了

优化的方式有很多种:

css单独抽离
html/css/js 代码进行压缩
css代码和部分js代码兼容性的处理
。。。

这里我们为什么要区分开发环境和生产环境呢，最主要的目的是因为一些庞大的工作量，只需要在生产环境进行配置和运行就行了，如果在开发环境进行配置或调试运行的话，反而是降低了开发效率，提高了打包时间，就比如我们的压缩css/js文件，兼容性处理等等，这些在开发时并不是很重要，但是在线上时显得尤为重要。