前端技術週刊 2018-06-22：Webpack 生存指南

前端技術週刊 2018-06-22

新聞

生態更新

1. Nodejs 發佈了六月安全更新，建議開發者更新到 10.4.1 版本，包含對 HTTP/2 拒絕服務攻擊、TLS 拒絕服務等的預防。🔗
2. 五月底，歐盟的通用數據保護協議 GDPR 進入強制執行階段，用戶數據採集方式的不合規將致使歐盟追責，此舉將影響各大全球化公司。對用戶隱私的保護成爲今年互聯網圈的一個主旋律：WWDC 2018 上，蘋果宣佈將採用智能反追蹤技術遏制前端指紋技術；此前 Firefox 也啓用了相似技術；Chrome，這個浪潮中相對保守的一家，則根據「更好的廣告」標準上線了過激廣告的過濾功能。與之相關的 Web 標準中的 doNotTrack 已被普遍支持，same-site cookie 則將在各大瀏覽器的新版本中獲得支持。🔗
3. 5月，Nodejs 官方出了用戶調研報告，有不少數據值得一提：平均從業人員有 2.3 年的 Nodejs 使用經驗；94% 爲男性；近八成用戶使用了 NVM 之類的 Nodejs 版本管理；近六成使用了 LTS 版本的 Nodejs；3成的生產環境應用部署在 AWS 上；Nodejs 社區偏心的工具備：JSON 文件做爲持久化存儲、React 做爲前端框架、Express 做爲 Nodejs 框架、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