vue——webpack打包小解_前端

 

前端构建工具

vue——webpack打包小解_前端_02

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

vue——webpack打包小解_前端_03

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

  • 开发webpack 配置解析
    vue——webpack打包小解_前端_04

  • 从入口看 dev webpack如何编译
    vue——webpack打包小解_前端_05vue——webpack打包小解_前端_06

  • 各种依赖

  • 文件路径 操作方法
    vue——webpack打包小解_前端_07

  • nodejs框架

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

  • 引入一个 运行开发配置文件
    vue——webpack打包小解_前端_08

  • proxymiddleware HTTP代理转发中间件

  • webpackconfig webpack配置
    vue——webpack打包小解_前端_09vue——webpack打包小解_前端_10

  • dev 开发时
    vue——webpack打包小解_前端_11
    merge 合并配置文件用的
    untils 用的一些工具方法
    basewebpackconfig webpack配置文件 （开发/编译共享文件）
    htmlwebpackplugin 操作html插件

  • webpackbaseconf 文件
    vue——webpack打包小解_前端_12
  • projectroot 定义当前项目 根目录
    vue——webpack打包小解_前端_13
  • 一些基本配置
    entry 入口配置 app key-对象
    vue——webpack打包小解_前端_14

vue——webpack打包小解_前端_15
vue——webpack打包小解_前端_16output 输出配置
path 文件路径 对应assetsroot （在当前目录下 创建一个dist 当作输出目录）
vue——webpack打包小解_前端_17

  • publicpath 静态资源绝对路径
  • 对应
    vue——webpack打包小解_前端_18
  • filename 输出的文件名称
    vue——webpack打包小解_前端_19
  • resolve 代码中 根据 require es6 input 模块相关配置

extensions 自动补全 文件后缀
vue——webpack打包小解_前端_20vue——webpack打包小解_前端_21

  • fallback 指向node_modules模块

  • alias 提供别名 require路径缩短字符串长度
    vue——webpack打包小解_前端_22

  • 功能跟fallback类似
    vue——webpack打包小解_前端_23

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

  • preloaders 在loader 之前处理eslint
    vue——webpack打包小解_前端_24

  • loaders 不同loader处理
    include 检查目录里的文件 处理编译
    exclude 排除目录
    vue——webpack打包小解_前端_25

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

  • name 小于：base64字符串打包到 编译好的 js文件里
    大于 ：单独生成一个文件vue——webpack打包小解_前端_26
    生成 命名规则assetspath方法 对应
    vue——webpack打包小解_前端_27vue——webpack打包小解_前端_28
    又指向
    vue——webpack打包小解_前端_29vue——webpack打包小解_前端_30

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

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

    vue——webpack打包小解_前端_31

  • 字典文件 规则同上
    vue——webpack打包小解_前端_32

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

  • vue loader css处理文件 loader
    指向
    vue——webpack打包小解_前端_33
    vue——webpack打包小解_前端_34vue——webpack打包小解_前端_35

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

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

vue——webpack打包小解_前端_36
dev conf 这个文件
vue——webpack打包小解_前端_37
entry -> dev client 入口文件 --> 数组
加上
vue——webpack打包小解_前端_38
vue——webpack打包小解_前端_39

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

  • 合并
    vue——webpack打包小解_前端_40
    指向
    vue——webpack打包小解_前端_41
    vue——webpack打包小解_前端_42vue——webpack打包小解_前端_43
    vue——webpack打包小解_前端_44

  • 同是 css loader

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

vue——webpack打包小解_前端_45

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

vue——webpack打包小解_前端_53
vue——webpack打包小解_前端_54

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

vue——webpack打包小解_前端_55
vue——webpack打包小解_前端_56
vue——webpack打包小解_前端_57

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

vue——webpack打包小解_前端_58
vue——webpack打包小解_前端_59

  • 业务所需 端口转发 代理

vue——webpack打包小解_前端_60

  • 用express 启动 拿到app 对象

  • webpack 编译 传入config 参数
    vue——webpack打包小解_前端_61

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

  • 调试运行 express 中强大中间件
    编译好 文件 放在内存中
    vue——webpack打包小解_前端_62

  • hotmiddleware express 配合中间件、

vue——webpack打包小解_前端_63

  • 代理转发操作 使用 proxymiddleware 中间件
    vue——webpack打包小解_前端_64
    中间件 使用
    vue——webpack打包小解_前端_65
  • dev 中 publicpath 和 subdirectiry

vue——webpack打包小解_前端_66
访问 从当前的 static目录取

  • 配置静态资源访问路径

vue——webpack打包小解_前端_67

  • 监听端口 开发时访问用