前端工程化就是包括源代码的预编译、模块的依赖加载、以及代码的压缩等在内的代码构建的工作。 工程化的项目
1）不使用模块化打包的弊端：
1. 全局环境变量污染
2. 代码复用性差
3. 模块依赖关系混乱，难以确定引入文件顺序
4. 可维护性差，问题难以定位和修改
5. 文件组织混乱，页面http请求过多，降低性能
2）使用模块化解决的问题
1. 文件合并，减少客户端http请求
2. 模块化，将功能抽象为模块，维护方便
3. 使用打包工具，管理模块间的依赖
4. 使用打包工具对代码进行压缩，减少请求数据大小
5. 可使用预编译语言，便于开发过程
6. 简化构建流程，可针对项目环境进行特定打包
3）各种模块化方式
1. AMD
/** 接受三个变量
* 第一个为需要导出的当前模块名字
* 第二个为一个数组，声明需要引用的模块
* 第三个为当前到处模块的函数（暴露出执行结果）或者对象（暴露该对象）
**/
defined('name',[a,b,c],function(){
return fn;
})
2. CommenJS （类似nodejs）
//将每个文件视为一个模块
const a = require('./index');
// 通过exports导出
exports.getfn = function(){}
3. es6(在es6出现之前js没有模块化方案，es6增加了模块化内容)
// 依赖是在编译阶段进行加载,无法支持动态加载（运行时加载），需要将依赖放在顶层作用域
import './index.js'
export function fn(){}
使用模块化方式进行代码编写，我们还需要打包工具能够识别模块化的代码，合理组织代码将其变成浏览器可执行的代码提供给浏览器运行。webpack就是用于将模块化代码进行打包的工具。
4） webpack打包工具具体实现了怎样的功能
1.从入口文件开始分析整个应用的依赖树
2.将每个依赖模块包装起来，并放到一个数组中等待调用
3.实现模块加载的方法，并提供到模块执行的环境中，使得模块间可以互相调用
4.将执行入口文件的逻辑放在一个立即执行函数表达式中
5） webpack打包工具的配置
// 直接运行
webpack app.js ../dist/bundle.js
//配置文件包含的配置项
entry
output
loader
plugin
6）构建流程优化
目前阶段还用不到，需要时去查阅学习