webpack2的配置屬性說明entry,output,state,plugins,node,module,context

Webpack2配置屬性詳解

webpack說明

webpack是前端構建的一個核心所在，若是說後端構建就是把高級語言代碼編譯成機器碼，那麼前端的構建就是從新組合原有的代碼，雖然並不編譯成機器碼，但實際上，由於前端長期使用簡單的腳本開發，HTML，CSS，JS互相分離，難以造成相似工程化的「凝聚力」。

因此伴隨着大量的模塊化標準的創建，「組件化」前端的概念也逐漸確立，前端開始着重以功能模塊爲劃分，而不是和之前通常以代碼種類爲劃分。

webpack是很好的構建解決方案，簡單地說，它經過人爲設定的配置，按照需求將前端的各類代碼按照指定的方式組合，整理成瀏覽器可執行的正常代碼。這裏的各類代碼包括但不限於JS，能夠是HTML,CSS等任何代碼。

webpack基礎構建流程

一、從context對應的文件夾開始…

二、尋找entry裏全部的文件名…

三、而後讀取它們的內容。在解析代碼時，每個經過import（ES6） 或require()（Node） 引入的依賴都會被打包到最終的構建結果當中。它會接着搜索那些依賴，以及那些依賴的依賴，直到「依賴樹」的葉子節點 — 只打包它所須要的依賴，沒有其餘的東西。

四、Webpack 將全部東西打包到output.path對應的文件夾裏，使用output.filename對應的命名模板來命名（[name]被entry裏的對象鍵值所替代）

webpack屬性

webpack包括許多屬性，能夠靈活定製打包編譯過程。這篇文章，就着重地介紹webpack的配置，由於這是它的靈魂所在

context   基礎目錄，絕對路徑，用於從配置中解析入口起點(entry point)和加載器(loader)      注：默認使用當前文件路徑

entry     

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

output    出口文件的屬性，整個項目的惟一出口，雖然能夠有多個入口，可是隻有一個出口

module

不一樣資源的加載器，默認webpack只支持JS，可是引入不一樣的loader，就能夠加載更多類型的資源文件，例如HTML,CSS,JPG等等。經過module屬性配置須要匹配的文件資源和對應的加載器。須要注意的是，加載器須要提早經過npm安裝。

resolve   重定義如何處理模塊資源，例如設置模塊的別名，設置是否容許無後綴名等

plugins   插件能夠實現對各類資源文件的定製處理，例如壓縮，混淆，轉換，分割等等

devServer  配置開發服務器，這是一個小型的Node Express服務器，能夠爲打包後的靜態資源提供訪問服務

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

target

webpack能夠爲js的各類不一樣的宿主環境提供編譯功能，爲了能正確的進行編譯，就須要開發人員在配置裏面正確的進行配置

默認狀況下，target的值是web，也就是爲類瀏覽器的環境提供編譯

watch and watchOptions    webpack 能夠監聽文件變化，當它們修改後會從新編譯

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

node   自定義 NodeJS 環境

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

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