[VanillaJS]webpack 5-expressバインド

7743 ワード
webpack vanillajs 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では、express.staticを設定して静的ファイル(html、jpgなど)を送信する必要があります.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

🎉🎉
内部クラスと匿名クラス
白駿📌18(実施)-送糖#2839号