} }; 使⽤用 px2rem-loader ⻚页⾯面渲染时计算根元素的 font-size 值 ·可以使⽤用⼿手淘的lib-flexible库 ·https://github.com/amfe/lib-flexible 资源内联的意义 代码层⾯面： 请求层⾯面：减少 HTTP ⽹网络请求数 ·⻚页⾯面框架的初始化脚本 ·上报相关打点 · css 内联避免⻚页⾯面闪动 · ⼩小图⽚片或者字体内联 minuSize: 分离的包体积的⼤大⼩小 tree shaking(摇树优化) 概念：1 个模块可能有多个⽅方法，只要其中的某个⽅方法使⽤用到了了，则整个⽂文件都会被打到 bundle ⾥里里⾯面去，tree shaking 就是只把⽤用到的⽅方法打⼊入 bundle ，没⽤用到的⽅方法会在 uglify 阶段被擦除掉。 使⽤用：webpack 默认⽀支持，在 .babelrc ⾥里里设置 modules: 转换后的模块会带上⼀一层包裹 ·import 会被转换成 __webpack_require 模块 模块初始化函数 进⼀一步分析 webpack 的模块机制 分析： · 打包出来的是⼀一个 IIFE (匿匿名闭包) · modules 是⼀一个数组，每⼀一项是⼀一个模块初始化函数 · 通过 WEBPACK_REQUIRE_METHOD(0) 启动程序 · __webpack_require

代码执行结果 代码执行后文件结构 └── js/ │ └── a.js └── dist/ └── js/ └── a.js gulp 入门指南 - 1 - 本文档使用 看云 构建 a.js 压缩前 function demo (msg) { alert('--------\r\n' + msg + '\r\n--------') } demo('Hi') 1. 压缩CSS 2. 压缩图片 3. 编译Sass/LESS 4. 编译CoffeeScript 5. markdown 转换为 html gulp 入门指南 - 2 - 本文档使用 看云 构建 安装 Node 和 gulp gulp 是基于 node 实现的，那么我们就需要先安装 node。 Node 是一个基于Chrome JavaScript V8引擎建立的一个平台，可以利用它实现 跳转至当前目录的 demo 文件夹 cd demo // 跳转至上一级 cd .. Mac Mac 中建议只在 Documents 目录下进行文件操作。 gulp 入门指南 - 3 - 本文档使用 看云 构建 // 跳转至文档目录 cd /Users/你的用户名/Documents/ // 或第一次打开终端时直接输入 cd Documents // 查看目录下文件列表 ls // 创建文件夹 mkdir

deterministic 时默认最小 3 位数字会被 使用 chunkIds moduleIds webpack 5 webpack 4 ⻓期缓存：确定的模块 Id、chunk 和导出名称 持久化缓存 在 webpack 4 ⾥⾯，可以使⽤ cache-loader 将编译结果写⼊硬盘缓存，还可以使⽤ babel-loader，设置 option.cacheDirectory 将 babel-loader ID，作为输出的模块名，使⽤的时通过 ${name}/${expose} 的⽅式使⽤ • library：必须，其中这⾥的 name 为作为 umd 的 name； • remotes：可选，表示作为 Host 时，去消费哪些 Remote； • shared：可选，优先⽤ Host 的依赖，如果 Host 没有，再⽤⾃⼰的； • main.js：应⽤主⽂件 • remoteEntry.js：作为 remote

，同时所有非必要的metadata 也会被剥离掉 tree shaking(摇树优化)复习 概念：1 个模块可能有多个方法，只要其中的某个方法使用到了，则整个文件都会被打到 bundle 里面去，tree shaking 就是只把用到的方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。 使用：webpack 默认支持，在 .babelrc 里设置 modules:

__dirname + '/dist' } }; 通过占位符确保⽂文件名称的唯⼀一 核⼼心概念之 Loaders webpack 开箱即用只支持 JS 和 JSON 两种文件类型，通过 Loaders 去支持其它文 件类型并且把它们转化成有效的模块，并且可以添加到依赖图中。 本身是一个函数，接受源文件作为参数，返回转换的结果。 常⻅见的 Loaders 有哪些？ Loaders 的⽤用法 const

·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

订单⻚页 详情⻚页 登陆/注册 ⽤用户信息管理理 商城界⾯面 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 修改， 修订号：当你做了向下兼容的问题修正。 先行版本号