AngularJS與Webpack

引入Webpack整合開發環境

當AngularJS專案日益複雜,各component所使用的lib版本可能不一致(例如d3的v3,v4,v5),使用webpack可以避免全域變數被汙染,也可以對程式碼進行壓縮。

此外,將首頁中的script檔,由index.js統一管理,也可以避免因載入速度差異導致的undefined錯誤。

除了將js檔陸續移至index.js整合,也同時使用sass-loader,將原本的sass指令整合至webpack.config.js中。

需注意的是,webpack在整合js時,全域變數在瀏覽器中不再能單純的使用 var xxxfunction xxx 來定義,而須轉變成 window.xxx

目錄

  1. 1. 引入Webpack整合開發環境