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