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中的加载器

1. 通过loader打包非js模块
   
   
2. webpack中加载器的基本使用
   打包处理css文件
   
   use数组中指定的loader顺序是固定的
   多个loader的调用顺序是：从后往前调用

打包处理less文件

打包处理scss文件

3. 配置postCSS自动添加css的兼容前缀
   
4. 打包样式表中的图片和字体文件
   
5. 打包处理js文件中的高级语法
   

Vue单文件组件

1. 传统组件的问题和解决方案
   
2. 解决方案：
   
3. 单文件组成的组成结构
   template组件的模块区域
   script 业务逻辑区域
   style 样式区域
   
4. webpack中配置vue组件的加载器
   
   
5. 在webpack项目中使用vue
   
6. webpack打包发布
   上线之前需要通过webpack将应用进行整体打包，可以通过package.json 文件配置打包命令