自动化构建工具——6.webpack构建环境介绍

构建环境介绍

开发环境

开发环境指的就是能让代码本地调试运行的环境，详细的就是我们写的源代码里面包含ES6语法、less文件等，经过webpack的编译处理（例如将less编译成css，Es6编译成浏览器能识别的语法等），输出bundle这个能被浏览器所运行的资源文件。这个环境为了让程序员更加轻松、方便，所以还加了一些自动化的工作（比如自动打开浏览器、自动编译等操作），让我们的效率更高。这就是开发环境所做的事情。

生产环境

• 概念：生产环境就是能让代码优化上线运行的环境。

• 我们要做的事情有：

  • CSS样式经过整合处理是整合在JS中的，因为有css-loader将样式文件整合到JS文件中，而如果CSS样式在JS文件中的话会让JS体积变得非常大，同时它是现加载JS，才能通过创建style标签插入到页面中，这又会导致闪屏现象，所以我们要做的是将CSS从JS中提取出来；

  • 对代码进行统一的压缩

  • 样式代码和部分JS代码存在兼容性问题，所以要做样式和JS的兼容

    ……………………

• 目的：

  • 让我们的代码更快、更强、性能更好的运行
  • 让代码在各个浏览器都能平稳的运行

生产环境要做的事情比较多，如果都放在开发环境下，那开发环境要做的事就太多了，会极大拖累开发环境的构建速度，不利于我们开发，所以上述那些事要放在生产环境来做