前端必不可少的腳手架

對於打包工具的熟悉程度漸漸地也已經成爲衡量前端開發工程師水平的一個重要指標。記得在校招面試的時候就有問各類打包工具的問題，如對於 Gulp、Grunt、Webpack 的熟悉程度，各類打包工具的特色及優缺點等。而當咱們逐漸融入到一個特定的團隊中，通常都有現成的腳手架提供給咱們使用，而對於腳手架自己的關注程度也會慢慢下降。那是否就意味着，不須要掌握腳手架的相關知識了呢？其實否則，有如下幾個理由。

（1）任何腳手架都有必定的適用場景，可是同時也有邊界，若是不當心跨域了這個邊界，那麼極可能遇到意想不到的問題，如 bug。此時，若是對腳手架的原理有必定的瞭解，那麼也可以更快的定位問題。

（2）任何一個腳手架都不多是完美的，都會存在一個優化的階段，若是隻是用它，而不去了解它、優化它，那麼自己就是一個追求完美的工程師不該該具備的態度。何況，對於工程師來講，只是會用而不知道其原理自己就是一個笑話。

課程內容

本課程是基於對 Webpack 有必定的瞭解，或者是想深刻了解 Webpack 打包原理的讀者而寫的。若是隻是想了解如何使用 Webpack，那麼網上的大部分資料已經足夠了。如今對本課程作一個歸納，主要內容包含如下部分。

• Webpack 的核心概念
• Webpack 基本使用
• webpack-dev-server 核心概念
• webpack-dev-server 基本使用
• Webpack 的 HMR 原理分析
• Webpack 中的 Compiler 和 Compilation 對象
• Webpack 常見插件原理分析
• 寫一個 Webpack 插件
• 寫一個 Webpack 的 loader
• Webpack 結合 react-router 實現按需加載
• Webpack 2 的 Tree-shaking 深刻分析
• 以 Node 方式集成 Webpack 和 webpack-dev-server 打包

寫給讀者

其實如今基於 Webpack 的打包工具都已經很是成熟，因此讀者能夠隨意的在 Github 或者 npm 中找到須要的腳手架。可是，就像文章開頭所說，只有瞭解了 Webpack 的核心原理，才能在開發中作到駕輕就熟。我見過不少同窗，可以正常的使用 Webpack，對不少 Webpack 的配置也瞭解，可是當遇到問題的時候每每不知所措。經過本系列課程，會讓讀者擺脫現狀，更好的理解 Webpack 原理，而不會知其然不知其因此然。

單擊這裏詳見課程信息。

另外，招募做者來寫小課。GitChat是一個移動端的IT知識、技術分享平臺，於2017.10和CSDN合併，成爲其旗下獨立品牌。咱們正在尋求有互聯網基因的人來一塊兒分享IT人員的關切，誠摯邀請您來作一次分享（讓IT類文章變現，增長關注度、提升知名度），歡迎有志者加入~cuicui@gitbook.cn