Category: webpack

[webpack] webpack HMR(Hot Hodule Replacement) 應用於 django 搭配 react-hot-loader

前陣子剛換工作時,剛好部門內使用的後端為 django,前端為 react,然後使用 webpack 做編譯、打包及壓縮等佈署的動作。 但在開發前端 react 時必須要重複以下流程,更改程式碼 => 儲存 => 重新整理 想說既然有用 webpack ,就試著利用 webpack 所提供的 HMR(Hot Module Replacement) 來做 hot reload,開發會更快一點。 以下是當初設定的步驟~ dajngo 設定部分: 安裝 django-webpack-loader pip install django-webpack-loader  設定 settings.py 讓 django 預設會抓取 assets/bundles 與 asset/static 這裡個位置的靜態檔案, webpack BUNDLE_DIR_NAME 設為 ”,讓 webpack-loader 也至以上兩個路徑抓取靜態檔。 在 django 使用的 tempalte 中引用 wepack-loader module 上面這段( render_bundle […]

[webpack、angular] 打包 angular Uncaught Error: [$injector:modulerr]

剛開始學 webpack 打包 javascript、CSS 及一些圖片資源等 使用 angular 時總是遇到下完 webpack -p (壓縮打包的資源) 產生出來的 js 檔發生 inject error,其實明顯的是有 angular 的服務注入錯誤 (只是不知道是哪個= =) 另一方面造成的原因是因為 webpack -p 會使用一個設定 mangle: true 會將變數名稱用單一字母做替換,以減小 js 檔案大小。 (因此把 mangle 這個功能改為 false 就可以解決,只是有點消極,而且這樣相對壓縮有限) 但可想而知我們注入的 angular 服務 如: 這其中的 $scope 及 $http 也會被替換為其他字母,導致無法正確地注入服務,因此造成了這些錯誤。   解決方法為我們必須用angular 嚴謹一點的寫法來正確注入服務 當我們需要注入服務時,需要在前依序標明注入的服務 如: 利用 $inject 注入相依賴的服務 如: PS. 若有相對應的參數,也需要用此 inject […]