vue——webpack打包小解

---

QQ 1285575001
Wechat M010527
技术交流 QQ群599020441
纪年科技aming

---

前端构建工具

• 前端资源编译打包
• 输出 js css
• webpack 配置有毒

• vue 源码资源打包 - webpack 编译 ---->html + app.js

• 开发webpack 配置解析
  

• 从入口看 dev webpack如何编译
  

• 各种依赖

• 文件路径 操作方法
  

• nodejs框架

• express 启动webserver
  webpack 核心编译工具
  node.js 开放API （支持引入）

• 引入一个 运行开发配置文件
  

• proxymiddleware HTTP代理转发中间件

• webpackconfig webpack配置
  

• dev 开发时
  
  merge 合并配置文件用的
  untils 用的一些工具方法
  basewebpackconfig webpack配置文件 （开发/编译共享文件）
  htmlwebpackplugin 操作html插件

---

• webpackbaseconf 文件
  
• projectroot 定义当前项目 根目录
  
• 一些基本配置
  entry 入口配置 app key-对象
  

output 输出配置
path 文件路径 对应assetsroot （在当前目录下 创建一个dist 当作输出目录）

• publicpath 静态资源绝对路径
• 对应
  
• filename 输出的文件名称
  
• resolve 代码中 根据 require es6 input 模块相关配置

extensions 自动补全 文件后缀

• fallback 指向node_modules模块

• alias 提供别名 require路径缩短字符串长度
  

• 功能跟fallback类似
  

• 类似文件处理 loader 做编译
  扫描工程目录 根据后缀名 匹配文件
  文件内容 输入 loader输出

• preloaders 在loader 之前处理eslint
  

• loaders 不同loader处理
  include 检查目录里的文件 处理编译
  exclude 排除目录
  

• limit 限定图片文件大小 小于10kb 生成字串

• name 小于：base64字符串打包到 编译好的 js文件里
  大于 ：单独生成一个文件
  生成 命名规则assetspath方法 对应
  
  又指向
  

• 拿到assetsubdirectory 这个字串 拼接path 这个参数

• 生成 static/img/filename+file hash + ext （拓展名）

  

• 字典文件 规则同上
  

• eslint formatter 检查到错误提示错误信息 并提供规则链接

• vue loader css处理文件 loader
  指向
  
  

• 返回各种css预处理器对象

• 根据generateloaders 生成值
  传入 名称数组 通过判断字符数组的 元素 字符串
  拼接 生成 各种预处理器loader

---

dev conf 这个文件

entry -> dev client 入口文件 --> 数组
加上

• 启动 hot-reload 热加载技术代码
  （当改变源码是 浏览器不用刷新 也可浏览到变化的页面）
  （过程失败 自动刷新浏览器）

• 合并
  
  指向
  
  
  

• 同是 css loader

• 遍历 扩展名 拼接再调用 cssloader 处理

• 方便源码调试
  
• 定义一些插件
• 替换 process.env
  指向
  
  
  
  合并了 prodenv
  
  
  输出 development 对象
• 来做 开发 运行时 判断
  
• occurenceorderplugin 优化插件 打包后 模块使用频率
  给经常使用的模块 分配最小的ID
• hotmodulereplacement plugin hotmodule 加载插件
• no errorsplugin 加载出现错误 跳过那部分编译代码
  发现 编译包错误
• htmlwebpackplugin
  关键 filename 指定编译后 html 文件名
  template 我们要处理的模板
  inject true 处理后的css js 自动添加到 html文件

---

• port 可以在 环境变量中去 也可以 config 配置
  指向

• 从dev- proxytable 中取需要代理的接口

• 业务所需 端口转发 代理

• 用express 启动 拿到app 对象

• webpack 编译 传入config 参数
  

• 上文 compiler 主要是给 middleware 中间件用
  指定了 静态资源的 访问目录

• 调试运行 express 中强大中间件
  编译好 文件 放在内存中
  

• hotmiddleware express 配合中间件、

• 代理转发操作 使用 proxymiddleware 中间件
  
  中间件 使用
  
• dev 中 publicpath 和 subdirectiry

访问 从当前的 static目录取

• 配置静态资源访问路径

• 监听端口 开发时访问用