前端必不可少的腳手架
來源：原創(chuàng) 時間：2017-11-11 瀏覽：0 次
前端必不可少的腳手架
關(guān)于打包東西的了解程度漸漸地也現(xiàn)已成為衡量前端開發(fā)工程師水平的一個重要目標(biāo)。
記住在校招面試的時分就有問各種打包東西的問題，如關(guān)于 Gulp、Grunt、Webpack 的了解程度，各種打包東西的特色及優(yōu)缺點(diǎn)等。
而當(dāng)我們逐步融入到一個特定的團(tuán)隊(duì)中，一般都有現(xiàn)成的腳手架提供給我們運(yùn)用，而關(guān)于腳手架自身的重視程度也會漸漸下降。
那是否就意味著，不需求把握腳手架的相關(guān)常識了呢？其實(shí)不然，有以下幾個理由。
（1）任何腳手架都有必定的適用場景，可是一起也有鴻溝，如果不小心跨域了這個鴻溝，那么很可能遇到意想不到的問題，如 bug。
此刻，如果對腳手架的原理有必定的了解，那么也可以更快的定位問題。
（2）任何一個腳手架都不可能是完美的，都會存在一個優(yōu)化的階段，如果僅僅用它，而不去了解它、優(yōu)化它，那么自身就是一個尋求完美的工程師不應(yīng)該具有的情緒。
何況，關(guān)于工程師來說，僅僅會用而不知道其原理自身就是一個笑話。
系列內(nèi)容
本課程是依據(jù)對 Webpack 有必定的了解，或許是想深化了解 Webpack 打包原理的讀者而寫的。如果僅僅想了解怎么運(yùn)用 Webpack，那么網(wǎng)上的大部分材料現(xiàn)已足夠了。現(xiàn)在對本課程做一個歸納，首要內(nèi)容包括以下部分。
（1）Webpack 的中心概念
在本章節(jié)，首要會經(jīng)過一個依靠圖譜的比如來打開，詳細(xì)的論說 Webpack 的 loader、plugin、entry、output 等中心概念。結(jié)合 Webpack 2 官網(wǎng)的闡明以及日常開發(fā)實(shí)踐經(jīng)驗(yàn)進(jìn)行深化的剖析。
會運(yùn)用完好的實(shí)例讓讀者對 Webpack 中心概念有深化的了解，什么是 chunk、common chunk、hotUpdated chunk、externals、libraryTarget、library 等疑問會在本章節(jié)給出答案。
（2）Webpack 根本運(yùn)用
本章節(jié)從 Webpack 的根本運(yùn)用動身，可是又不止于根本運(yùn)用，會結(jié)合 7 個實(shí)例代碼來深化的剖析 Webpack 與 CommonChunkPlugin 結(jié)合后的打包實(shí)踐與原理。
一起關(guān)于 CommonChunkPlugin 的各種裝備都會運(yùn)用詳細(xì)的實(shí)例來深化解說。經(jīng)過本章節(jié)的學(xué)習(xí)，不只會運(yùn)用 Webpack，并且還知道怎么更好的運(yùn)用 Webpack。
（3）webpack-dev-server 中心概念
本章節(jié)會深化剖析 webpack-dev-server 相關(guān)的概念，如 Proxy 署理、HMR 原理、contentBase、publicPath、lazyload、filename 等許多裝備的詳細(xì)解說。
經(jīng)過深化的了解這部分內(nèi)容，不只可以了解優(yōu)化的點(diǎn)，一起也能更好的處理實(shí)在項(xiàng)目開發(fā)中可能遇到的問題。
（4）webpack-dev-server 根本運(yùn)用
本章節(jié)首要解說怎么在項(xiàng)目中運(yùn)用 webpack-dev-server，并深化的剖析了 webpack-dev-server 的 iframe 形式與 inline 形式的差異。
網(wǎng)上關(guān)于這兩者的差異大都來自于官網(wǎng)的翻譯，在本章節(jié)中會結(jié)合詳細(xì)的實(shí)例來進(jìn)行剖析。
（5）Webpack 的 HMR 原理剖析
在本章節(jié)中，不只會解說 Webpack 完成 HMR 的原理，一起也會解說怎么寫出支撐 HMR 的代碼，然后可以深化的了解 HMR。
這其中會包括常見的函數(shù)：decline() 函數(shù)、accept() 函數(shù)、dispose() 函數(shù)、status() 函數(shù)、apply() 等函數(shù)進(jìn)行剖析，一起也會詳細(xì)地解說 Webpack 與 HMR 的相關(guān)裝備信息，以便在今后運(yùn)用 Webpack 的時分稱心如意。
（6）Webpack 中的 Compiler 和 Compilation 目標(biāo)
Compilation 和 Compiler 目標(biāo)是寫 Webpack 插件的中心內(nèi)容，在本章節(jié)中不只會詳細(xì)敘述兩者的效果以及怎么在插件中運(yùn)用它們，一起也會解說在 Webpack 插件書寫中常常運(yùn)用到的辦法或許特點(diǎn)。
經(jīng)過本章節(jié)，不只能了解什么是模塊、依靠模塊、chunk、資源等，還能知道怎么依據(jù)詳細(xì)場景來運(yùn)用這些資源。
（7）Webpack 常見插件原理剖析
在本章節(jié)中會將重視點(diǎn)放在 Webpack 兩個插件的原理上，包括 CommonChunkPlugin 和 PrepackWebpackPlugin，經(jīng)過這兩個插件來加深對上面常識的了解，然后為下文寫一個 Webpack 插件做襯托。
（8）寫一個 Webpack 插件
Webpack 插件是擴(kuò)展 Webpack 根底功用的首要途徑，在本章節(jié)中會解說怎么寫一個 Webpack 插件。
（9）寫一個 Webpack 的 loader
在本章節(jié)中會運(yùn)用 Markdown 文件處理 loader 來解說怎么寫 Webpack 的 loader。
（10）Webpack 結(jié)合 react-router 完成按需加載
在上面的章節(jié)中，講到了怎么運(yùn)用 require.ensure 來動態(tài)發(fā)生獨(dú)立的 chunk 的問題，在本章節(jié)會運(yùn)用 react-router 的比如來解說怎么運(yùn)用 Webpack 的這種特性。
經(jīng)過動態(tài)按需加載的特性可以削減頁面初次加載的時長，合作單頁面運(yùn)用肯定是頁面優(yōu)化的首選。
（11）Webpack 2 的 Tree-shaking 深化剖析
Tree-shaking 是 Webpack 2 引進(jìn)的新特性，本章節(jié)會詳細(xì)描述怎么運(yùn)用 Tree-shaking 及其原理和適用范圍。
本章節(jié)內(nèi)容包括詳細(xì)的實(shí)例，所以讀者必定可以很好的了解這種新特性。
（12）以 Node 方法集成 Webpack 和 webpack-dev-server 打包
在本章節(jié)中將運(yùn)用一個很好的比如來解說怎么依據(jù) Webpack、webpack-dev-server 來寫一個打包東西并習(xí)慣詳細(xì)的事務(wù)場景。經(jīng)過本章節(jié)的內(nèi)容，能很好的將上面章節(jié)的內(nèi)容做一個串聯(lián)，一起也能更好的了解 Webpack。
寫給讀者
其完成在依據(jù) Webpack 的打包東西都現(xiàn)已十分老練，所以讀者可以隨意的在 Github 或許 npm 中找到需求的腳手架。
可是，就像文章最初所說，只要了解了 Webpack 的中心原理，才能在開發(fā)中做到稱心如意。
我見過許多同學(xué)，可以正常的運(yùn)用 Webpack，對許多 Webpack 的裝備也了解，可是當(dāng)遇到問題的時分往往手足無措。
經(jīng)過本系列課程，會讓讀者脫節(jié)現(xiàn)狀，更好的了解 Webpack 原理，而不會知其然不知其所以然。
