표현 파일로 반응 파일

Question

이것은 express.js로 반응 파일을 제공 한 것은 처음입니다. 빌드가 실행되고 서버가 수신 중이지만 html 파일에 구성 요소가 주입되지 않는 이유를 파악할 수 없습니다. 대신 html 템플릿 만 렌더링합니다.

const express = require('express'); 
const morgan = require('morgan'); 
const path = require('path'); 

const app = express(); 

app.use(morgan(':remote-addr - :remote-user [:date[clf]] ":method 
:url HTTP/:http-version" :status :res[content-length] :response-time 
ms')) 

app.use(express.static(path.resolve(__dirname, '..', 'build'))) 

app.get('*', (req, res) => { 
res.sendFile(path.resolve(__dirname,'..', 'build', 'index.html')) 
}); 

const PORT = process.env.PORT || 3000; 

app.listen(PORT,() => { 
console.log(`App listening on port ${PORT}!`); 
}); 

내가 콘솔에 표시되는 내용이 :

여기 build folder structure

내하는 index.js 내 서버 폴더에서 파일입니다 : 여기

내 빌드 폴더의 사진입니다

served page console

도움이 크게 주시면 감사하겠습니다.

Answer 1

이 index.html 파일

<script src="src="/js/main.33e13313.js""></script> 

main.33e13313.js에 다음 코드를 추가하여 다음과 같은 링크를

react-express-boilerplate

을 참조 파일 웹팩와 패키지 JS이다.

는 귀하의 package.json 파일은 다음과 같이 설정됩니다 :

"scripts": { 
    "clean": "rm -rf build public/bundle.js", 
    "build": "babel server --out-dir build && webpack", 
    "start": "NODE_ENV=production supervisor ./build/main.js", 
    "development": "NODE_ENV=development node ./build/main.js" 
    }, 

당신은 실행 NPM 실행 빌드를 사용합니다.

바벨을 사용하여 es6을 es5로 변경할 수 있습니다. 이 빌드 도구입니다.

webpack을 사용하여 JavaScript 파일을 패키징 할 수 있습니다. packagig는 JavaScript 파일을 하나의 파일로 묶습니다. 이 포장 도구입니다.