webpack

[lewenweijia]

webpack定位: 以js文件为入口和出口的模块打包器, 专注bundling

plugins: 顺序执行(pipeline)
loader: 逆序执行(compose)

webpack开发模式: (核心功能, 监听文件变化, 自动重编译)

1. webpack watch 模式 ==> 简单重编译
2. (//) webpack-dev-server => 支持living reloading(自动刷新浏览器) + 模块热加载
3. webpack-dev-middleware =>支持living reloading(自动刷新浏览器) + 模块热加载 + 深度定制server

重点: webpack-dev-server系列在工作的时候, 并不会实际输出内容到磁盘, 使用了memeory-fs的

devServer/contentBase的定位: 一个静态资源服务器

index.hash.js: 主业务代码包
vendor.hash.js: 第三方库代码包(通过externals cdn化进行进一步优化?)

处于hot模式的devServer?: 先尝试HMR, 然后再尝试刷新整个页面

HMR好处:

1. 保留页面状态
2. 减少更新更改的内容, 减少单次编译量
3. 更改时立即更新

//# sourceMappingUrl=....js.map

HMR导致的单个依赖树节点的更新, 会导致该节点作为根节点的整棵子树进行更新

[lewenweijia]

利用ffmpeg将gif转MP4

[lewenweijia]

**loader"
style-loader: 输出html加上<style>标签 + 让CSS文件也有HMR能力

[lewenweijia]

使用的都是各种旧版本immutable操作:
[].concat
Object.assign

压缩, 也只是压缩空格 + 变量名(修改式)

tsc: 类型编译系统
babel: js编译系统
webpack: 模块编译系统