(踩坑回憶錄)webpack踩坑記錄

前言

問題

動態設置publicpath

爲何會有這個需求？
一些異步的靜態資源（例如打包後的chunk.css，chunk.js），是指向當前請求server的地址的，而不是咱們指望的靜態資源服務器，因此咱們要配置publicpath，打包的時候指定請求的靜態資源服務器地址。
問題來了：
咱們有不少的環境，dev，test，uat，prd，
你總不能發佈每一個環境前，打不一樣的publicpath包吧？
那麼咱們就須要動態配置publicpath
webpack給咱們留了一條後路，
webpack_public_path
按照文檔所說，
咱們配置下
__webpack_public_path__ = process.env.ASSET_PATH;
而後在main.js或者index.js 的首行代碼加載就行了，由於要在加載動態組件以前進行配置。
通常狀況下，咱們的首行代碼爲
import App from "./App"
你們也都知道 import 和 require的區別
import 是 編譯時導入，會有「提高現象」

__webpack_public_path__ = "http://cdn.com";
    import App from "./App"

實際上在打包編譯時爲

import App from "./App" 
    __webpack_public_path__ = "http://cdn.com";

那麼組件加載 是在 咱們publicPath 以前，那麼咱們配置publicPath也就失去了意義。
因此 咱們變通一下

// publicpath.js
    __webpack_public_path__ = "http://cdn.com";

這樣就解決了

import  "./publicpath.js" 
    import App from "./App"

另外上述只是配置publicpath，動態配置的話 須要 服務器template模版將當前環境的靜態資源服務器地址配置

<script>
window.publicpath = "http://test.cdn.com"
</script>

// publicpath.js
    __webpack_public_path__ = window.publicpath;

注意一點，__webpack_public_path__是webpack的內部全局參數，而不是window對象的屬性，因此不要畫蛇添足寫成「window.__webpack_public_path__」

使用typescript的同窗，eslint 會error，
你改爲

// publicpath.js
    (__webpack_public_path__ as any) = "http://cdn.com";

就不會報錯了。

固定打包內容中的1.chunk.js

小結