本期技術週刊一起了解 Webpack ，歡迎大家閲讀 ～
文章推薦
《詳解 Webpack devtools》 作者：Shenfq
最近在開發一個低代碼平台，主要用於運營搭建 H5 活動。這中間涉及到第三方組件的開發，而第三方組件想要接入平台，需要經過我們特定的打包工具來 build。構建之後的組件，會合併成單個的 js 文件，而且代碼會被壓縮會混淆，這個時候如果需要調試，那就會極其痛苦。想要有一個好的調試環境，就要涉及 SourceMap 的輸出，而 Webpack 的 devtools 字段就是用於控制 SourceMap。
《基於 Webpack 搭建 Chrome 擴展開發環境》作者：不羈的風
Chrome擴展開發是目前比較火爆的領域，作為市場佔有率第一的瀏覽器，有海量用户支撐。同時，Chrome擴展可以無縫對接Edge瀏覽器，不可不謂一箭雙鵰。
本文將介紹如何使用webpack構建一個支持Typescript的開發環境，在此基礎上，實現一個可以修改網頁背景的擴展應用。
《Webpack 源碼 - Webpack 把 react 編譯成 weapp》作者：perkz
在package.json中可以找到入口文件
這個文件的作用就是引入webpack核心函數（lib/webpack.js）以及工具文件，拋出整理好之後的webpack核心函數
《如何使用 Webpack 優化 moment.js》作者：記得要微笑
清洗moment語言環境文件
默認情況下，當您編寫var moment = require('moment')代碼並使用 webpack 打包時，捆綁文件的大小會變得很重，因為webpack 會捆綁所有Moment.js 所有語言環境文件（在 Moment.js 2.18.1 中，壓縮後的 KB 為 160）。
《Wuzzle，進行基於 Webpack 的 JS 轉譯》作者：烏柏木
轉譯器（transpiler）是指能夠進行文件到文件一對一轉換的編譯器（compiler）。在 JS 世界中，常見的開箱即可用的轉譯器有 typescript cli、babel cli 等，但他們一般只處理 .js、.ts 等腳本文件。而 webpack 儘管能通過配置處理各種文件，但他更關注如何打包 JS，做文件一對一轉換相當麻煩。
為了解決這些侷限，wuzzle 作為配置 webpack 編譯的補充者，提供了基於 webpack 封裝的 JS 轉譯命令 wuzzle transpile，以下是具體用法。
《前端構建效率優化之路》作者：chokcoco
我們知道，隨着項目體量越來越大，我們在開發階段將項目跑起來，也就是通過 npm run serve 的單次冷啓動時間，以及在項目發佈時候的 npm run build 的耗時都會越來越久。
因此，打包構建優化也是伴隨項目的成長需要持續不斷去做的事情。在早期，項目體量比較小的時，構建優化的效果可能還不太明顯，而隨着項目體量的增大，構建耗時逐漸增加，如何儘可能的降低構建時間，則顯得越來越重要：
- 大項目通常是團隊內多人協同開發，單次開發時的冷啓動時間的降低，乘上人數及天數，經年累月節省下來的時間非常可觀，能較大程度的提升開發效率、提升開發體驗
- 大項目的發佈構建的效率提升，能更好的保證項目發佈、回滾等一系列操作的準確性、及時性
本文，就將詳細介紹整個 WMS FE 項目，在隨着項目體量不斷增大的過程中，對整體的打包構建效率的優化之路。
《Webpack 拆包：關於 splitChunks 的幾個重點屬性解析》作者：deepfunc
為什麼需要 splitChunks？
先來舉個簡單的栗子，wepack 設置中有 3 個入口文件：a.js、b.js 和 c.js，每個入口文件都同步 import 了 m1.js，不設置 splitChunks，配置下 webpack-bundle-analyzer 插件用來查看輸出文件的內容，打包輸出是這樣的：（跳轉見文章）
從分析圖中可以比較直觀的看出，三個輸出 bundle 文件中都包含了 m1.js 文件，這説明有重複的模塊代碼。splitChunks 的目的就是用來把重複的模塊代碼分離到單獨的文件，以異步加載的方式來節省輸出文件的體積。splitChunks 的配置項很多而且感覺官方文檔的一些描述不是很清楚，下面通過一些重點配置屬性和場景解釋來幫助大家理解和弄懂如何配置 splitChunks。為方便理解和簡單演示，webpack 和 splitChunks 的初始設置如下...
問題推薦
Unanswered：
- craco 配置 style-resources-loader問題？
- 為什麼 webpack 配置別名後自動補全的路徑錯誤導致找不到模塊編譯失敗？
- webpack4使用react-loadable為什麼不生效?
Most frequent：
- vue-ts-webpack搭建項目，編譯報錯是為什麼？
- webpack3.6.0 構建 vue 項目怎麼升級 vue-devServe？
- webpack5 打包報錯 “import may appear only with 'sourceType: module' ”？
- webpack+node+ts打包後 is not a function問題?
# SegmentFault 技術週刊 #
「技術週刊」是社區特別推出的技術內容系列，一週一主題。
每週二更新，歡迎「關注」。大家也可以在評論處留言自己感興趣的主題，推薦主題相關的優秀文章。
如有問題可以添加小姐姐微信~
