프로젝트를 parcel 을 사용하여 번들링 하고 있습니다. parcel bundler를 js단에서 사용하고, 번들링된 bundler를 dev 서버의 middleware 단으로 사용할 수 있도록 변경 할 수 있습니다.

parcel middleware 사용하기

1) npm 설치

parcel-bundler를 설치합니다.

npm i parcel-bundler

2) bundler js 생성

번들링을 할 js를 생성합니다. (이는 webpack처럼 config 파일을 생성하여 작성 가능합니다.)

'use strcit';

const parcel = require('parcel-bundler');

const entry = './src/index.html';
const bundler = new Bundler(entry, bundlerOption);

module.exports = bundler;

3) express middleware에 삽입

node.js내의 express 앱에서 번들러를 Middleware처럼 사용 가능합니다. middleware 기능을 사용한다면, watch 및 hmr 기능을 서버와 연동하여 사용할 수 있게 됩니다.

const bundler = require('{path}/{to}/bundler');

app.use(bundler.middleware());

해당 Middleware는 서버를 실행할때 한번 번들링이 되며, 소스를 수정시에 자동으로 hmr(Hot Module Replacement) 될 수 있도록 설정해 줍니다.

parcel bundler middleware 이슈

개발 환경에서 해당 middleware를 사용하려고 보니, rest api 등을 설정해놓은 router를 싹다 무시해 버립니다;; middleware 내부를 확인해보니, 설정해놓은 middleware내의 port를 static port로 강제 설정합니다.

이러다보니, 같은 포트를 사용하는 rest api는 아무리 호출해도 실행이 되질 않고, static한 index.html 파일을 계속 response 하게 됩니다.

따라서, parcel middleware를 사용하시고자 한다면, browser-sync를 사용한 우회, 또는 rest api용 서버 port를 다르게 두고 사용하셔야 할 것 같습니다.