工程化
所谓工程化，可以简单的认为是将框架的职责拓宽再拓宽，主旨是帮业务团队更好的完成需求，工程化会预测一些常碰到的问题，将其扼杀在摇篮。而这种路径是可重用的，是具有可持续性的，比如第一个优化去除冗余，是在多次去除冗余代码，思考冗余出现的原因而最终思考得出一个避免冗余的方案。
自动化构建工具
要完成前端工程化，少不了工程化工具，require.js和grunt的出现，改变了业界前端代码的编写习惯。
同时也是推动前端工程化的基础。
require.js是一个伟大的模块加载器，它的出现让javascript制作多人维护的大型项目变成了现实。grunt是一款javascript的构建工具，主要完成编译，压缩，合并等一系列工作，后续出现了yeoman,gulp,webpack等构建工具。
webpack具有grunt，grlp对于静态资源自动化构建的能力，但更重要的是，webpack弥补了require.js在模块化方便的缺陷，同时兼容AMD与CMD的模块化加载规范，具有更强大的JS模块化的功能。
自动化构建工具有两种模式
1.开发模式
开发模式比较简单，主要用于监听文件变化，自动进行打包，合并的操作。
2.生产模块 （实现md5的版本号）
参考记住栈和需求，静态文件就要发布到cdn上，而且必须有md5版本号，方便快速发布（cdn更新极其缓慢，所以更新必须使用新的文件名）
生产模式主要增加了文件压缩，文件md5名修改，替换html等操作。
这样的好处就是上线非常方便，一个命令就可以更新上线，而且不存在缓存问题。
cdn的介绍
cdn是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率，cdn的关键技术主要有内容存储和分发技术。（缓解主服务器的压力，将分布在全球各地的用户请求分散到距离用户最近的缓存服务器上，如果距离最近的请求饱和之后，将会分配其他相对较近的服务器上）
cdn的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分不到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。
cdn网络是在用户和服务器之间增加Cache层，如何将用户的请求引导到Cache上获得资源服务器的数据，主要是通过接管DNS实现，这就是cdn的最基本的原理。
为什么要用webpack
前端需要模块化：js模块化不仅仅为了提高代码的复用性，多人协作开发项目，更是为了让资源文件更合理的进行缓存。
webpack处理后，输出的静态文件只剩下js与png，而css，less，jade其他的文件都合并到了js中。
在webpack中，所有的资源都是模块，模块需要通过AMD或CMD规范加载，就像css样式文件，不再在html中以<link>标签加载。
webpack支持哪些功能特性
支持common.js和AMD模块，意思就是我们可以无痛迁移旧项目。
支持模块加载器和插件机制，可对模块灵活定制，特别是babel-loader,有效支持ES6.
可以通过配置，打包成多个文件，有效利用浏览器的缓存功能提升性能。
将样式文件和图片等静态资源也可以视为模块化进行打包，配合loader加载器，可以加载less等css预处理器。
内置有source map，即使打包在一起依旧方便调试。
安装webpack
官网下载：https://nodejs.org/en/
中文网：http://nodejs.cn/download/
下载node-v8.11.1-x86.msi文件之后，然后可以双击安装，安装路径可以选择，建议默认值，再往后就是傻瓜式安装了。安装完之后，执行以下步骤：
一定要注意自己的版本
1.win+R--->cmd--->
等待安装webpack，
安装完成
2.查看webpack安装版本
安装成功。
3.找到项目路径，初始化项目
4.项目名称默认packagename:webpackbak
然后按照图片设置，（按enter键，回车换行就可以了），现在项目初始完成了。
5.先前创建的工程目录下会多了一个配置文件
生成的文件内容是之前设置的版本信息等
接下来就是创建工程（在webpack工程创建讲解）。