技術周刊（Webpack 生存指南 2018-06-22）

技術周刊（Webpack 生存指南 2018-06-22）

來自專欄阿里媽媽前端快爆69 人贊了文章

前端快爆

生態更新

1. Node.js 發布了六月安全更新，建議開發者更新到 10.4.1 版本，包含對 HTTP/2 拒絕服務攻擊、TLS 拒絕服務等的預防。??
2. 五月底，歐盟的通用數據保護協議 GDPR 進入強制執行階段，用戶數據採集方式的不合規將導致歐盟追責，此舉將影響各大全球化公司。對用戶隱私的保護成為今年互聯網圈的一個主旋律：WWDC 2018 上，蘋果宣布將採用智能反追蹤技術遏制前端指紋技術；此前 Firefox 也啟用了類似技術；Chrome，這個浪潮中相對保守的一家，則根據「更好的廣告」標準上線了過激廣告的過濾功能。與之相關的 Web 標準中的 doNotTrack 已被廣泛支持，same-site cookie 則將在各大瀏覽器的新版本中得到支持。??
3. 5月，Node.js 官方出了用戶調研報告，有很多數據值得一提：平均從業人員有 2.3 年的 Node.js 使用經驗；94% 為男性；近八成用戶使用了 NVM 之類的 Node.js 版本管理；近六成使用了 LTS 版本的 Node.js；3成的生產環境應用部署在 AWS 上；Node.js 社區偏愛的工具有：JSON 文件作為持久化存儲、React 作為前端框架、Express 作為 Node.js 框架、Nginx 作為負載均衡工具、Docker 作為容器、Jenkins 作為 CI 工具。??
4. 如果你是 React 的忠實擁躉，那麼這可能是社區的又一個好消息，Office 用 React 實現的版本接近完成了，這證明了 React 駕馭極複雜系統的能力。??
5. 安卓上的 Chrome 68 起，添加到桌面的行為有了細微調整，可以偵測能夠添加到主屏幕的事件 beforeinstallprompt，並允許開發調用 installPromptEvent.prompt() 徵詢用戶意見。??

瑞士軍刀

1. Polly.JS 是 Netflix 用於捕獲、重放並記錄 HTTP 請求的一個 JS 庫。??
2. 零配置的打包工具 Parcel 發布其 1.9 版本，支持 Tree shaking 特性，Watcher 部分提速2倍。??
3. ML5js 是基於 tensorflow.js 的一個封裝，提供了預訓練模型可直接用於檢測體態、短句生成、重新繪圖、自動譜曲、處理英文單詞關係等。??
4. 友商 360 推出了 SpriteJS，提供了 Canvas 上的類似 DOM 的渲染與動畫介面，亮點是支持了 Transition API 和 Web Animation API，並可以簡單支持 D3 和 Protonjs。目前此庫還不支持 Web GL 渲染模式。??
5. CSS Doodle 為我們提供了用 CSS Grid 繪製平面構成圖案的簡單方式。??

專題：Webpack 生存指南

Webpack 恐怕是每一個前端工程師的痛，過於複雜的配置副作用，完全不可規避的打包流程，乏味、粗糙而難以讀懂的官網文檔，都讓大家對它又愛又恨。本期專題旨在讓大家能夠成為一個身心健康的 webpack 配置工程師。

• Webpack 入門手冊

由淺入深進行 webpack 的項目實踐，同時也會介紹一些社區上的插件去解決一些問題。看完這一系列的教程，你有足夠的信心可以將 webpack 應用到你的項目中了。

• Webpack 從入門到工程實踐

也是一篇非常不錯的入門級文章，另外還講解了create-react-app 的配置規則。文章質量很高，唯一的缺憾是作者僅針對 webpack 3，而現在 webpack 已經升級到了 4，create-react-app 也跟隨 webpack 4 做了一定的升級。

• Webpack 4 中的代碼分割和公用代碼的抽取 & 中譯

Webpack 4 發布時去除了 CommonsChunkPlugin，取而代之的是 SplitChunksPlugin。本文是 webpack開發者在他們 Medium 博客上的介紹文章。

金台： 實際上你看完之後依然後一臉懵逼，還是自己寫個 Demo 多實踐一下吧。

• Webpack 官方例子集合

金台： 如果你實在看不懂官方文檔，試著運行一些他們自己的例子，自己體會一下，收穫也還是不錯的。

• Webpack 3 源碼閱讀系列

如果你想自己實現一個 webpack 的 Loader 或 Plugin，官方文檔唯一的建議是看代碼。那麼有沒有過來人看源碼的經驗呢？本文即是 webpack 3 的源碼閱讀第一篇，系列一共 39 篇，值得一讀。

• Webpack 打包流程優化策略

本文介紹了優化 webpack 打包過程的各個策略，從測量、並行化、降低負載、緩存等角度給出了建議。

• Webpack 模塊熱載入策略分析

本文介紹了無刷新的通信機制和通信流程。

• Webpack 為什麼這麼難用？

如果上面這些文章都救不了你，或許是時候去社區找找共鳴了。看看過來人是怎樣分析 webpack 的難用點的吧：）

---

本期編輯：承虎（Humphry），審閱：@一絲

推薦閱讀：