[ VanillaJS ] webpack5 - express 연동

이전 시리즈에서 webpack 설정을 마치고 express 서버에 코드를 수정하자.

yarn add express 
yarn add -D nodemon

server/app.js

const express = require('express');
const router = require("./router");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(express.static("dist"));
app.use(router);

app.listen(PORT, () => {
  console.log(`
  ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
  ┃   Server listening on port: ${PORT}    ┃
  ┃     http://localhost:${PORT}/          ┃
  ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
  `);
});

express에서 정적파일( html, jpg, 등 )을 보내주기위해 express.static 설정해줘야 한다.

server/router/index.js

const express = require("express");
const path = require("path");

const router = express.Router();

router.get("/", (req, res) => {
  res.sendFile(path.resolve(__dirname, "../../dist/home.html"));
});

router.get("/home", (req, res) => {
  res.redirect("/");
});

module.exports = router;

package.json

"scripts": {
  "dev": "nodemon server/app.js",
  "build": "webpack"  
}

이제 터미널에서 실행해보면

yarn build
yarn dev

🎉🎉