create-react-app 腳手架指令可以生成 React 專案，在專案完成之後執行打包命令 npm run build，資料夾內生成 build資料夾，就是打包後的檔案，在瀏覽器運行 index.html 發現頁面空白，打開控制台有報錯，css 和 js 檔案的引用路徑有問題。
瀏覽 index.html 代碼可以發現：
<!-- index.html -->
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<title>React App</title>
<link href="/static/css/main.3394d54e.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>!function (e) { function r(r) { for (var n, l, f = r[0], i = r[1], a = r[2], c = 0, s = []; c < f.length; c++)l = f[c], Object.prototype.hasOwnProperty.call(o, l) && o[l] && s.push(o[l][0]), o[l] = 0; for (n in i) Object.prototype.hasOwnProperty.call(i, n) && (e[n] = i[n]); for (p && p(r); s.length;)s.shift()(); return u.push.apply(u, a || []), t() } function t() { for (var e, r = 0; r < u.length; r++) { for (var t = u[r], n = !0, f = 1; f < t.length; f++) { var i = t[f]; 0 !== o[i] && (n = !1) } n && (u.splice(r--, 1), e = l(l.s = t[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function l(r) { if (n[r]) return n[r].exports; var t = n[r] = { i: r, l: !1, exports: {} }; return e[r].call(t.exports, t, t.exports, l), t.l = !0, t.exports } l.m = e, l.c = n, l.d = function (e, r, t) { l.o(e, r) || Object.defineProperty(e, r, { enumerable: !0, get: t }) }, l.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, l.t = function (e, r) { if (1 & r && (e = l(e)), 8 & r) return e; if (4 & r && "object" == typeof e && e && e.__esModule) return e; var t = Object.create(null); if (l.r(t), Object.defineProperty(t, "default", { enumerable: !0, value: e }), 2 & r && "string" != typeof e) for (var n in e) l.d(t, n, function (r) { return e[r] }.bind(null, n)); return t }, l.n = function (e) { var r = e && e.__esModule ? function () { return e.default } : function () { return e }; return l.d(r, "a", r), r }, l.o = function (e, r) { return Object.prototype.hasOwnProperty.call(e, r) }, l.p = "./"; var f = this.webpackJsonpdemo = this.webpackJsonpdemo || [], i = f.push.bind(f); f.push = r, f = f.slice(); for (var a = 0; a < f.length; a++)r(f[a]); var p = i; t() }([])</script>
<script src="/static/js/2.1902eda2.chunk.js"></script>
<script src="/static/js/main.cbf35db7.chunk.js"></script>
</body>
</html>
發現 css 和 js 檔案都是用絕對路徑引用的，這是 webpack 打包一貫擁有的問題，將 /static 改成 ./static ，再運行，頁面沒有問題成功顯示。
但是在寫實際專案的時候手動修改相對路徑，不但麻煩，而且容易引起其他問題。因此直接在專案的 package.json 配置檔進行修改，添加 "homepage": "."
// package.json
{
"name": "demo",
"version": "0.1.0",
"private": true,
"homepage": ".", // 添加這一行
"dependencies": {
"@babel/core": "7.12.3",
...
然後再執行 npm run build ，運行打包後的檔案，沒有任何問題。