從基礎到實戰 手把手帶你掌握新版Webpack4.0
原文配套視頻資源獲取鏈接：點擊獲取
原文配套源碼資源獲取鏈接：點擊獲取
-
第1章 課程導學（打消你的學習疑慮）
掌握Webpack越來越成為前端工程師的標配技能，本章會對課程整體進行介紹，打消你的學習疑慮。
- 1-1 課程導學試看
-
第2章 Webpack 初探
本章通過清晰易懂的例子，帶你了解 Webpack 的產生背景，以及其能夠解決的問題。在此基礎上，完成開發環境的搭建，Webpack 的安裝，並進行最基礎的 Webpack 使用講解。
- 2-1 webpack 究竟是什麽？
- 2-2 什麽是模塊打包工具？
- 2-3 Webpack的正確安裝方式
- 2-4 使用Webpack的配置文件
- 2-5 淺析 Webpack 打包輸出內容
-
第3章 Webpack 的核心概念
本章講解 Webpack 中的一些核心概念，從 Loader 與 Plugin 開始，帶你學明白 Webpack 的運行機制，然後逐步深入，擴展衍生出 SoureMap， HMR， WDS 等常見概念。本章課程學習過程中，額外增加了對 Webpack 官方文檔的查閱方式講解，幫助大家學會查閱文檔。...
- 3-1 什麽是 loader試看
- 3-2 使用 Loader 打包靜態資源（圖片篇）
- 3-3 使用 Loader 打包靜態資源（樣式篇 - 上）
- 3-4 使用 Loader 打包靜態資源（樣式篇 - 下）
- 3-5 使用 plugins 讓打包更便捷
- 3-6 Entry 與 Output 的基礎配置
- 3-7 SourceMap 的配置
- 3-8 使用 WebpackDevServer 提升開發效率
- 3-9 Hot Module Replacement 熱模塊更新（1）
- 3-10 Hot Module Replacement 熱模塊更新（2）
- 3-11 使用 Babel 處理 ES6 語法（1）
- 3-12 使用 Babel 處理 ES6 語法（2）
- 3-13 Webpack 實現對React框架代碼的打包
-
第4章 Webpack 的高級概念
本章接第三章內容，繼續講解 Webpack 中難度更大的知識點，包含了 Tree Shaking，Code Spliting，打包環境區分，緩存，shimming 等內容，幫助你繼續擴展 Webpack 的基礎知識面。
- 4-1 Tree Shaking 概念詳解試看
- 4-2 Develoment 和 Production 模式的區分打包
- 4-3 Webpack 和 Code Splitting（1）
- 4-4 Webpack 和 Code Splitting（2）
- 4-5 SplitChunksPlugin 配置參數詳解（1）
- 4-6 SplitChunksPlugin 配置參數詳解（2）
- 4-7 Lazy Loading 懶加載，Chunk 是什麽？
- 4-8 打包分析，Preloading, Prefetching
- 4-9 CSS 文件的代碼分割
- 4-10 Webpack 與瀏覽器緩存( Caching )
- 4-11 Shimming 的作用
- 4-12 環境變量的使用方法
-
第5章 Webpack 實戰配置案例講解
本章通過庫文件打包，PWA項目打包，TypeScript打包支持等實戰常見 Webpack 配置案例，帶大家了解最新前端工程化常識，並在實例實現的過程中，鞏固前三章節的基礎知識點。同時章節末尾進行了 Webpack 打包性能優化的內容，幫助同學們了解如何在打包速度過慢時進行合理的打包過程優化。...
- 5-1 Library 的打包
- 5-2 PWA 的打包配置
- 5-3 TypeScript 的打包配置
- 5-4 使用 WebpackDevServer 實現請求轉發
- 5-5 WebpackDevServer 解決單頁面應用路由問題
- 5-6 EsLint 在 Webpack 中的配置（1）
- 5-7 EsLint 在 Webpack 中的配置（2）
- 5-8 webpack 性能優化(1)
- 5-9 webpack 性能優化(2)
- 5-10 Webpack 性能優化(3)
- 5-11 Webpack 性能優化(4)
- 5-12 webpack性能優化(5)
- 5-13 多頁面打包配置
-
第6章 Webpack 底層原理及腳手架工具分析
本章首先講解如何自己實現 Webpack 中的 Loader 和 Plugin 的擴展。在了解 Webpack 擴展機制後，近一步深入 Webpack 底層，通過編碼，實現了類似 Webpack 的簡單打包工具，在此過程中，讓同學們能夠真正理解打包過程中的各種復雜概念及底層原理。...
- 6-1 如何編寫一個 Loader（1）
- 6-2 如何編寫一個 Loader（2）
- 6-3 如何編寫一個 Plugin
- 6-4 Bundler 源碼編寫（模塊分析 1）
- 6-5 Bundler 源碼編寫（模塊分析 2）
- 6-6 Bundler 源碼編寫（ Dependencies Graph ）
- 6-7 Bundler 源碼編寫（ 生成代碼 ）
-
第7章 Create-React-App 和 Vue-Cli 3.0腳手架工具配置分析
最後一章增加了對 Create-React-App 和 Vue-Cli 3.0 兩個前端腳手架工具中 Webpack 配置內容的分析，幫助同學了解不同腳手架工具設計的出發點，和配置的技巧。
原文配套視頻資源獲取鏈接：點擊獲取
原文配套源碼資源獲取鏈接：點擊獲取
從基礎到實戰 手把手帶你掌握新版Webpack4.0