打包後資源路徑

問題：直接打包會出現一下情況：

方式一：

package.json檔案下加入homepage欄位

{
  "name": "wap-v2",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",         //加上此句即可
  "dependencies": {...}
}

方式二：

webpack相關 -> config/paths.js

function getServedPath(appPackageJson) { 
    const publicUrl = getPublicUrl(appPackageJson); 
    const servedUrl = 
    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : ‘./’); // 配置檔案跟路徑’/’ 修改這裡 
    return ensureSlash(servedUrl, true); 
}
 

體積優化

專案的體積優化也很重要，開發時的按需載入，模組化分割這裡就不多說了。

打包時，會生成一系列的.map檔案，佔的體積非常大。

webpack相關 -> webpack.config.prod.js

devtool: shouldUseSourceMap ? 'source-map' : false,
//變為
devtool:  false,

無報錯但空白頁

經過上面的配置與修改心想這下總該沒事了吧！

然而事實可能不同：

HashRouter與BrowserRouter的異同

專案中控制路由跳轉使用的是BrowserRouter。

在開發過程中使用是沒有問題的，但是將頁面上傳至伺服器之後，問題就來了：使用者訪問的資源不存在，頁面是空白的，就像上面。

原因：

在browserHistory 模式下，URL 是指向真實 URL 的資源路徑，當通過真實 URL 訪問網站的時候，由於路徑是指向伺服器的真實路徑，但該路徑下並沒有相關資源，所以使用者訪問的資源不存在。

解決

將BrowserRouter 改為 HashRouter

上面文件並不完善，之後有時間再新增或更改。