두가지 방법을 소개하려고 한다.
live.js
변경을 감지해서 브라우저를 새로고침 해주는 라이브러리이다.
그냥 public/index.html에 스크립트를 추가하면 된다.
<head>
<script type="text/javascript" src="https://livejs.com/live.js"></script>
</head>다시 express를 실행하고 화면을 들어 가면!
react hot load 처럼 hot load 됩니다 🎉
하지만 prod모드에서 첨가되어선 안된다.
public/develop.html와 public/production.html 템플릿을 따로 작성하도록 하자.
public/production.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="https://livejs.com/live.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html> public/develop.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- -->
<script type="text/javascript" src="https://livejs.com/live.js"></script>
<!-- -->
</head>
</html> webpack.common.js에 있는 HtmlWebpackPlugin 설정을 dev, prod에서 각각 설정해주도록 하자.
webpack.dev.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
//...
const HTML_TEMPLATE = "public/develop.html";
//...
plugins: [
new HtmlWebpackPlugin({
title: "개발모드 | 홈",
template: HTML_TEMPLATE,
filename: "home.html",
}),
],webpack.prod.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
//...
const HTML_TEMPLATE = "public/production.html";
//...
plugins: [
new HtmlWebpackPlugin({
title: "홈",
template: HTML_TEMPLATE,
filename: "home.html",
}),
],
//...이제 끝!
dev-server
yarn add -D webpack-dev-server const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
});devServer 변경된 모듈만 새로 번들링한다.
package.json
"start": "webpack serve --open --config webpack.prod.js",
"build": "webpack --config webpack.prod.js"yarn build
yarn start추후에 API 연동을 하려면 따로 express 서버를 켜두기만 하면 된다!
이 방법이 더 빠르고 쉬운 것 같다.
그래도 express를 통해서 html를 렌더링하고 싶어서 첫 번째 방법으로 진행할 것이다.
쿠키 공장 이전 중 🚛 쿠키 나누는 것을 좋아해요.