webpack說明

webpack是前端構(gòu)建的一個核心所在，如果說后端構(gòu)建就是把高級語言代碼編譯成機器碼，那么前端的構(gòu)建就是重新組合原有的代碼，雖然并不編譯成機器碼，但實際上，因為前端長期使用簡單的腳本開發(fā)，HTML，CSS，JS互相分離，難以形成類似工程化的“凝聚力”。

所以伴隨著大量的模塊化標準的建立，“組件化”前端的概念也逐漸確立，前端開始著重以功能模塊為劃分，而不是和以前一般以代碼種類為劃分。

webpack是很好的構(gòu)建解決方案，簡單地說，它通過人為設(shè)定的配置，按照需求將前端的各種代碼按照指定的方式組合，整理成瀏覽器可執(zhí)行的正常代碼。這里的各種代碼包括但不限于JS，可以是HTML,CSS等任何代碼。

webpack基礎(chǔ)構(gòu)建流程

1、從context對應(yīng)的文件夾開始…

2、尋找entry里所有的文件名…

3、然后讀取它們的內(nèi)容。在解析代碼時，每一個通過import（ES6） 或require()（Node） 引入的依賴都會被打包到最終的構(gòu)建結(jié)果當中。它會接著搜索那些依賴，以及那些依賴的依賴，直到“依賴樹”的葉子節(jié)點 — 只打包它所需要的依賴，沒有其他的東西。

4、Webpack 將所有東西打包到output.path對應(yīng)的文件夾里，使用output.filename對應(yīng)的命名模板來命名（[name]被entry里的對象鍵值所替代）

webpack屬性

webpack包括許多屬性，可以靈活定制打包編譯過程。這篇文章，就著重地介紹webpack的配置，因為這是它的靈魂所在

context

基礎(chǔ)目錄，絕對路徑，用于從配置中解析入口起點(entry point)和加載器(loader)

注：默認使用當前文件路徑

entry

入口文件的屬性，整個項目的主入口，其余依賴的模塊均在這些文件中引入

output

出口文件的屬性，整個項目的唯一出口，雖然可以有多個入口，但是只有一個出口

module

不同資源的加載器，默認webpack只支持JS，但是引入不同的loader，就可以加載更多類型的資源文件，例如HTML,CSS,JPG等等。通過module屬性配置需要匹配的文件資源和對應(yīng)的加載器。需要注意的是，加載器需要提前通過npm安裝。

resolve

重定義如何處理模塊資源，例如設(shè)置模塊的別名，設(shè)置是否允許無后綴名等

plugins

插件可以實現(xiàn)對各種資源文件的定制處理，例如壓縮，混淆，轉(zhuǎn)換，分割等等

devServer

配置開發(fā)服務(wù)器，這是一個小型的Node Express服務(wù)器，可以為打包后的靜態(tài)資源提供訪問服務(wù)

devtool

要在webpack打包的同時生成source maps，需得在webpack.config.js中配置devtool配置項

target

webpack可以為js的各種不同的宿主環(huán)境提供編譯功能，為了能正確的進行編譯，就需要開發(fā)人員在配置里面正確的進行配置

默認情況下，target的值是web，也就是為類瀏覽器的環(huán)境提供編譯

watch and watchOptions

webpack 可以監(jiān)聽文件變化，當它們修改后會重新編譯

externals

webpack中的externals配置提供了"不從 bundle 中引用依賴"的方式。例如，從 CDN引入jQuery，而不是把它打包

node

自定義 NodeJS 環(huán)境

performance

這些選項可以控制 webpack 如何通知"資源(asset)和入口起點超過指定文件限制"，就是當構(gòu)建大資源文件時可以給出警告提示

stats

這些選項能讓你準確地控制顯示哪些包的信息

本文會不定時持續(xù)更新......