Vue前端工程化
模块化相关规范
传统开发模式的主要问题
命名冲突
文件依赖
通过模块化解决上述问题
模块化就是把单独的一个功能封装到一个模块（文件）中，模块之间相互隔离，但是可以通过特定的接口公开内部成员，也可以依赖别的模块。
模块化开发的好处：方便代码的重用，从而提升开发效率，并且方便后期的维护。
前端模块化规范
AMD,CMD
服务器端模块化规范
大一统的模块化规范-ES6模块化
在ES6模块化规范诞生之前，JavaScrit社区已经尝试并提出了AMD,CMD,CommonJS等模块化规范。
但是，这些社区提出的模块化标准，还是存在一定的差异与局限性，并不是浏览器与服务器通用的模块化标准，例如：
因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器与服务器端通用的模块化开发规范。
ES6模块化规范中定义：
每个js文件都是一个独立的模块
导入模块成员使用import关键字
暴露模块成员使用export关键字
ES6模块化规范
Node.js中通过babel体验ES6模块化
默认导出和默认导入
默认导出语法 export default 默认导出的成员
默认导入语法 import 接收名称 from ‘模块标识符’
每个模块中，只允许使用唯一的一次 export default 否则会报错
按需导出与按需导入
直接导入并执行模块代码
webpack
当前web开发面临的困境
文件依赖关系错综复杂
静态资源请求效率低
模块化支持不好
浏览器对高级JavaScript特性兼容程度较低
webpack概述
webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境
webpack提供了友好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目，都是基于webpack进行打包构建的。
在项目中安装和配置webpack
配置打包的入口和出口
配置webpack的自动打包功能
webpack-dev-server 会启动一个实时打包的http服务器
webpack-dev-server 打包生成的输出文件，默认放到了项目根目录中，而且是虚拟的，看不见的
配置html-webpack-plugin生成预览页面
配置自动打包相关的参数
打包之后自动打开网页
webpack中的加载器
- 通过loader打包非js模块
-
webpack中加载器的基本使用
打包处理css文件
use数组中指定的loader顺序是固定的
多个loader的调用顺序是：从后往前调用
打包处理less文件
打包处理scss文件
- 配置postCSS自动添加css的兼容前缀
- 打包样式表中的图片和字体文件
- 打包处理js文件中的高级语法
Vue单文件组件
- 传统组件的问题和解决方案
- 解决方案：
- 单文件组成的组成结构
template组件的模块区域
script 业务逻辑区域
style 样式区域 - webpack中配置vue组件的加载器
- 在webpack项目中使用vue
- webpack打包发布
上线之前需要通过webpack将应用进行整体打包，可以通过package.json 文件配置打包命令