全家桶 和 webpack 开发商城项⽬目 08 基础篇：webpack 进阶⽤用法 03 扫码试看/订阅 《玩转 webpack》视频课程 商城技术栈选型 前端 后端 商城架构设计 平台层 ⾸首⻚页 列列表⻚页 购物⻋车⻚页 商品管理理 订单管理理 ⽤用户端 管理理后台 服务层 基础设施 商品服务 订单服务 购物⻋车服务 搜索服务 ⽀支付服务 评论服务 CI/CD …… 订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 UI 设计与模块拆分 主⻚页 类⽬目⻚页 详情⻚页 登陆/注册 前台模块拆分 后台模块拆分 React 全家桶环境搭建 · 初始化项⽬目 npm init -y · 创建项⽬目⽬目录 · 安装 react、react-dom、redux、react-redux npm i react react-dom redux react-redux 的同时并⾏行行的加载⻚页⾯面数据 功能开发要点 · 浏览器器端： · 服务端： · MVC 开发⽅方式，数据库基于 Sequelize · Rest API ⻛风格 ·采⽤用 JWT 进⾏行行鉴权 ·组件化，组件颗粒度尽可能⼩小 ·直接复⽤用 builder-webpack-geektime 的构建配置，⽆无需关注构建脚本 源码和演示地址 · 源码： https://github.com/cpse

bin/_mocha” }, npm i mocha chai -D 4. 执行测试命令 npm run test 持续集成的作用 优点： 核心措施是，代码集成到主干之前，必须通 过自动化测试。只要有一个测试用例失败， 就不能集成。 ·快速发现错误 ·防止分支大幅偏离主干 Github 最流行的 CI 接入 Travis CI 1. https://travis-ci.org/ 在发布重要版本时，可以发布alpha, rc 等先行版本 alpha和rc等修饰版本的关键字后面可 以带上次数和meta信息 遵守 semver 规范的优势 优势： ·避免出现循环依赖 ·依赖冲突减少 语义化版本（Semantic Versioning）规范格式 次版本号：当你做了向下兼容的功能性新增， 主版本号：当你做了不兼容的 API 修改， 修订号：当你做了向下兼容的问题修正。 先行版本号 ·alpha：是内部测试版，一般不向外部发布，会有很多 Bug。一般只有测试人员使用。 ·beta：也是测试版，这个阶段的版本会一直加入新的功能。在 Alpha 版之后推出 ·rc：Release Candidate) 系统平台上就是发行候选版本。RC 版不会再加入新的功能了，主 要着重于除错。

本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 Web服务，做类似 PHP的事。 打开 https://nodejs.org/ 点击绿色的 INSTALL INSTALL 按钮下载安装 node。 使用终端/命令行 命令行 [21:11:01] Starting 'script'... [21:11:01] Finished 'script' after 2.85 ms 至此，我们完成了 gulp 压缩 js 文件的自动化代码编写。 注意： 注意：使用 gulp.watch 后你的命令行会进入“运行”状态，此时你不可以在命令行进行其他操作。可通 过 Ctrl + C 停止 gulp。 Mac 下使用 control

·Optimizing options: 优化参数 ·Stats options: 统计参数 ·options: 通用参数(帮助命令、版本信息等) webpack-cli 执行的结果 最终会根据配置参数实例化 webpack 对象，然后执行构建流程 webpack-cli对配置文件和命令行参数进行转换最终生成配置选项参数 options Webpack 的本质 Webpack可以将其理解是一种基于事件流的编程范例，一系列的插件运行。 Webpack 流程篇 webpack的编译都按照下面的钩子调用顺序执行 run make before-resolve normal-module-loader program seal emit 初始化option 开始编译 从entry开始递归的 分析依赖，对每个 依赖模块进行build 对模块位置进行解析 将loader加载完成的 module进行编译，生成 AST树 遍历AST，当遇到 新的 chunk，继续遍历依赖 4. 重复上面的过程，直至得到所有的 chunks 模块化：增强代码可读性和维护性 传统的网页开发转变成 Web Apps 开发 代码复杂度在逐步增高 部署时希望把代码优化成几个 HTTP 请求 分离的 JS文件/模块，便于后续代码的维护性 常见的几种模块化方式 CJS ES module AMD import * as largeNumber

腾讯IVWEB 程柳柳锋 扫码试看/订阅 《玩转 webpack》 课程介绍 框架 DSL 解析 Web 应⽤用多元化 组件化 内容综述 基础篇 P1-P3 进阶篇 P4-P5 原理理篇 P6-P7 实战篇 P8 webpack 的基本概念和⽇日常 开发的实⽤用技巧 以⼯工程化的⽅方式组织 webpack 构 建配置，和 webpack 打包优化 详细剖析 webpack 打包原理理 GitHub stars 40766 11796 29427 周下载量量 3,385,392 478,876 816,228 为什什么选择 webpack? 社区⽣生态丰富 配置灵活和插件化扩展 官⽅方更更新迭代速度快 初识 webpack：配置⽂文件名称 可以通过 webpack --config 指定配置⽂文件 webpack 默认配置⽂文件：webpack.config.js

·可以使⽤用⼿手淘的lib-flexible库 ·https://github.com/amfe/lib-flexible 资源内联的意义 代码层⾯面： 请求层⾯面：减少 HTTP ⽹网络请求数 ·⻚页⾯面框架的初始化脚本 ·上报相关打点 · css 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 (url-loader) HTML 和 JS 内联 raw-loader 内联 html