learning-react
learning-react copied to clipboard
velopert
20.3 asset-manifest.json 파일 내용
챕터 20.3.5(전자책 p340-341)
책에서 적힌 코드 그대로 npm run build 를 하였으나 책 내용 상 build/asset-manifest.json 파일 내용에 포함되어있는 runtime-main.js 파일 등이 제 asset-manifest.json 파일 내용에는 나타나지 않습니다. 따라서 index.server.js에서 변수 내용으로 치환할수 없어 css를 서버사이드렌더링 시 로딩할 수 없습니다. 혹시 왜그런지 아시는분 도움 부탁드립니다.
// 아래는 npm run build 후 제 asset-manifest.json 파일 내용입니다. { "files": { "main.css": "/static/css/main.a9ef2341.css", "main.js": "/static/js/main.c15c2d12.js", "index.html": "/index.html", "main.a9ef2341.css.map": "/static/css/main.a9ef2341.css.map", "main.c15c2d12.js.map": "/static/js/main.c15c2d12.js.map" }, "entrypoints": [ "static/css/main.a9ef2341.css", "static/js/main.c15c2d12.js" ] }
이 부분 작년 9쇄에 업데이트 했는데 깃허브에 공유를 못했네요 죄송합니다.
pg. 563 build/asset-manifest.json
{
"files": {
"main.css": "/static/css/main.384285ee.css",
"main.js": "/static/js/main.c6e32ae5.js",
"static/js/787.2bb6a743.chunk.js": "/static/js/787.2bb6a743.chunk.js",
"index.html": "/index.html",
"main.384285ee.css.map": "/static/css/main.384285ee.css.map",
"main.c6e32ae5.js.map": "/static/js/main.c6e32ae5.js.map",
"787.2bb6a743.chunk.js.map": "/static/js/787.2bb6a743.chunk.js.map"
},
"entrypoints": [
"static/css/main.384285ee.css",
"static/js/main.c6e32ae5.js"
]
}
pg.563 index.server.js
import ReactDOMServer from 'react-dom/server';
import express from 'express';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';
import path from 'path';
import fs from 'fs';
// asset-manifest.json에서 파일 경로들을 조회합니다.
const manifest = JSON.parse(
fs.readFileSync(path.resolve('./build/asset-manifest.json'), 'utf8')
);
function createPage(root) {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<title>React App</title>
<link href="${manifest.files['main.css']}" rel="stylesheet" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">${root}</div>
<script src="${manifest.files['main.js']}"></script>
</body>
</html>
`;
}
main.js를 넣으면 됩니다.
