[NodeJS] Express Server HMR

Express Server에 Hot module replacement 적용하기

이전의 포스팅에서 webpack의 hmr을 셋팅할 수 있는 3가지 방법에 대해서 소개한 적이 있다. 이 중 선택에 대해서는 개발자의 몫이라, 프로젝트에 맞게 셋팅을 하면 된다라고 이야기 했다. 그 3가지 방법 중 여기에서는 3번째 방법, Express 서버에 middleware를 이용한 방법을 선택했다. 관련 repository는 아래의 링크를 클릭하면 프로젝트 정보를 볼 수 있다.

진행을 할 당시 webpack-dev-middleware 의 버전이 3.x.x까지 나왔으나 나온지가 별로 안되었던 터라 2.x.x 버전을 이용하였다. 실제로 보니깐 3.x.x의 경우 context 옵션을 필수로 기재해야 한다고 나오는데, 아직까지는 관련 자료가 많지 않아 2.x.x 버전으로 이용하였다.

관련 Module 설치하기

일단 환경을 잡기 위해 관련되 모듈을 설치해준다. 관련 모듈에는 일단 Express 와 webpack-dev-middleware, webpack-hot-middleware 등이 있다.

$ npm install express webpack-hot-middleware webpack-dev-middleware --save

*상단에 기재되어 있는 repository는 boilderplate를 위해 만들어 둔 directory 구조 안에 여러가지가 있다. 필요한 부분은 참고해도 되고, 해당 포스팅 글에서 필요한 부분만 이용해서 셋팅을 하면 된다.

Express 서버 코드 작성하기

위와 같이 관련 module을 설치 완료하였다면, 이제는 서버 코드를 먼저 작성하면 된다.

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

const app = express();

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('../build/dev.server.config.js');

const compiler = webpack(webpackConfig);
const middleware = webpackDevMiddleware(compiler, {
        noInfo: true,
        hot: true,
        publicPath: '/dist/',
        filename: 'bundle.js',
        quiet: false,
        lazy: false,
        watchOptions: {
            aggregateTimeout: 300,
            poll: true
        },
        stats: {
            colors: true,
        },
        historyApiFallback: true,
    });

app.use(middleware);
app.use(webpackHotMiddleware(compiler, {
    log: console.log,
    path: '/__webpack_hmr',
    heartbeat: 10 * 1000,
}));
app.get('/', function(req, res) {
    res.send('<body><div id="app"></div><script src=\'dist/bundle.js\'></script></body>');
});
const server = app.listen(3000, function() {
    const host = server.address().address;
    const port = server.address().port;

    console.log(`Express server has started on port:${host}:${port}`);
});

Express에서 환경을 잡을 때의 특이 사항으로는 webpack 관련 모듈을 추가해주었다. webpack 관련 모듈이 빠진다면 Express CLI 혹은 간단하게 Express 서버 구축하기 예제 등에서 쉽게 볼 코드이다. 위에서 webpack, webpack-dev-middleware와 webpack-hot-middleware를 추가해준 것이 Express의 HMR을 추가해줄 핵심 모듈이다.

webpackConfig의 코드는 다음과 같다.

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');

const devWebpackConfig = merge(baseWebpackConfig, {
    entry: [
        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
        './src/main.js',
    ],
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'bundle.js',
        publicPath: '/dist/',
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
    ],
});

module.exports = devWebpackConfig;

위에서 baseWebpackConfig의 options을 merge 하고 있는데, baseWebpackConfig은 vue CLI를 이용해서 세팅된 옵션 중 하나이다. dev.server.config에서는 기존의 base.config를 가져와서 추가적으로 dev middleware를 위한 옵션만 추가로 넣어준 형태이다.

위와 같이 셋팅한 후 서버를 띄우고 브라우저를 열면 console창에 ‘[HMR] connected’ 라는 문구와 함께 코드를 수정하면 HMR기능이 붙어있는 것을 확인 할 수 있다.

Comments