Express Server HMR

Martin

2018-03-10

Express Server에 Hot module replacement 적용하기

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

Github repository

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

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기능이 붙어있는 것을 확인 할 수 있다.

현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.：Martin（https://github.com/martinYounghoonKim）

Hot Module Reloading Module in Docker

Webpack의 HMR 설정하기

Express Server에 Hot module replacement 적용하기

관련 Module 설치하기

Express 서버 코드 작성하기