淺析 -- webpack

標籤：bundle   mod   content   替換   hot   編譯   目錄   目的   分割   

 

1. 一切皆模組

正如js檔案可以是一個“模組（module）”一樣，其他的（如css、image或html）檔案也可視作模 塊。因此，你可以require(‘myJSfile.js‘)亦可以require(‘myCSSfile.css‘)。這意味著我們可以將事物（業務）分割成更小的易於管理的片段，從而達到重複利用等的目的。

2. 按需載入

傳統的模組打包工具（module bundlers）最終將所有的模組編譯產生一個龐大的bundle.js檔案。但是在真實的app裡邊，“bundle.js”檔案可能有10M到15M之大可能會導致應用一直處於載入中狀態。因此Webpack使用許多特性來分割代碼然後產生多個“bundle”檔案，而且非同步載入部分代碼以實現按需載入。

webpack-dev-server產生的包並沒有放在你的真實目錄中,而是放在了記憶體中. 熱模組替換的好處是只替換更新的部分,而不是頁面重載.在命令列中運行inline模式，並啟用熱模組替換

 

webpack-dev-server --content-base build --inline --hot

注意:命令列模式下,webpack.config.js中一定要配置output.publicPath來指定編譯後的包(bundle)的訪問位置.

淺析 -- webpack