花了一兩天回顧了下 webpack 各個配置的作用,簡單記錄下。
主要閱讀列表：
http://webpack.wuhaolin.cn/(有強制廣告,用charles代理可以去掉，但還是建議買書支持)
http://imweb.io/topic/5a4451c3a192c3b460fce366
http://taobaofed.org/blog/2016/09/09/webpack-flow/ https://lihuanghe.github.io/2016/05/30/webpack-event.html

一、webpack 背景

1、面臨的問題

前端模塊思想的普及，vue、less 等各種框架工具的出現，讓前端開發效率更高，但是這些框架和工具的源碼都不能直接跑在瀏覽器或者服務端，需要轉化構建。

2、解決的手段
構建需要把源代碼轉化成可直接在終端上運行的 html、css、js, 具體需要實現的功能如下：

• 代碼轉換：ts 轉換成 js,less 轉換成 css
• 文件優化：壓縮js、css、html,合并圖片
• 代碼分割：提取多個頁面的公共代碼，提取首屏不需要的部分讓其異步加載(不熟悉這個功能)
• 模塊合并：把模塊分類，合并成一個文件
• 自動刷新：監聽本地源代碼的變化，可以做到熱替換模塊
• 代碼校驗：在提交代碼到遠程倉庫之前用 eslint 檢驗代碼是否符合規范、是否通過單元測試
• 自動發布：更新完代碼后，自動構建出線上發布代碼并傳輸給發布系統

二、webpack的構建流程

1、概念

在 webpack眼里，一切皆模塊,一般一個模塊就是指一個文件， 所有模塊(文件)構建后都會打包為最終的 js,html,css,image,如下圖所示：

2、有哪些配置項

webpack 的配置項一般放在 項目下的 webpack.config.js 里，用一個 object對象 來描述所有配置信息，如下：

• Entry：配置打包文件入口，可以是一個或者多個文件
• Output：配置輸出文件名、文件路徑
• Module：用來配置模塊的讀取和解析規則，即打包過程中規定什么類型、什么路徑的的模塊用哪個 loader 來解析，常用 loader 有babel-loader(把 es6代碼轉換成 es5)
• Resolve：配置如何尋找模塊對應的文件，可以規定尋找文件時補全后綴的規則，規定尋找文件的默認路徑別名等等
• Plugin：擴招 webpack 構建中各個階段的功能，比如webpack-parallel-uglify-plugin(壓縮代碼)、extract-text-webpack-plugin(提取 js 中的 css 到單獨的 css 文件中)

3、構建流程

1）粗略構建流程如下：
A.Webpack 啟動后會從Entry里配置的Module開始遞歸解析 Entry 依賴的所有 Module。
B.每找到一個 Module， 就會根據配置的Loader去找出對應的轉換規則，對 Module 進行轉換后，再解析出當前 Module 依賴的 Module。
C.這些模塊會以 Entry 為單位進行分組，一個 Entry 和其所有依賴的 Module 被分到一個組也就是一個 Chunk。
D.最后 Webpack 會把所有 Chunk 轉換成文件輸出。 在整個流程中 Webpack 會在恰當的時機執行 Plugin 里定義的邏輯。
2) 詳細構建流程如下：

三、具體怎么配置：webpack4

有了 parcel 的競爭，webpack 推出了配置量極小的 webpack4，配置方法可以參考：
1、webpack的簡單配置

2、webpack 官方 API

轉載于:https://juejin.im/post/5ad9a8496fb9a07abb2327eb

總結

以上是生活随笔為你收集整理的webpack 阅读笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。