[Node.js] Express 에서 Webpack-dev-middleware 적용하기

꾸준히 성장하는 Daisy의 기록🏃‍♀️·2021년 3월 22일

기존에 ES 모듈 방식으로 프로젝트를 진행하면서 여러 가지 모듈을 생성한 후 엔트리 파일에 imoprt해서 사용했었는데, 그때 마다 html이 랜더링 될 때 이 많은 모듈들을 다 불러와야 되는 건가?? 라는 생각이 들긴 무슨..아무 생각 없이 ES 모듈 방식으로 개발하고 있었다!🤦‍♀️ 다행히 이번 미션에서 Webpack과 Babel을 사용할 기회가 있었기에, 그 과정에서 배운 Webpack의 장점과 어떻게 express 서버와 webpack을 연동해서 쓸 수 있었는지를 기록해보려 한다.

Webpack 개념

Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. 즉, img, stylesheet, js와 같은 것들을 모두~~ 합쳐서 하나의 bundle로 만들어 주는 애다. 사실 개념만 보고서는 이게 그래서 뭐? 어디에 좋다는 건데?라는 생각이 들었는데 모든 모듈들을 컴파일해서 하나의 번들 파일로 뿅✨ 만들어 주는 Webpack을 보며 정말 유용하다는 생각이 들었다.

위 그림에서 처럼 webpack에은 엔트리 파일을 시작으로 의존 관계에 있는 모듈을 엮어서 하나의 번들 파일을 만든다.

웹팩은 module loader와 plugin으로 구성된다.

webpack - module loader

모듈(image, js, sass..)을 입력 받아 Javascript로 변환한다.

webpack - plugin

의존 관계를 분석해서 번들된 결과에 대한 후속 처리를 담당한다. 공백을 없애거나..

webpack config

webpack은 config 파일을 통해 자신이 어떻게 동작해야 될지를 판단한다.

babel loader

babel이 webpack에서 동작하려면 babel loader가 설치 되어야 한다.

Webpack 설치하기

웹팩 설치

웹팩을 설치한다.

$ npm install --save-dev webpack webpack-cli

babel-loader를 설치한다. Webpack이 모듈을 번들링할 때 Babel을 사용하여 ES6+ 코드를 ES5 코드로 트랜스파일링 해준다.

babel-loader 설치

$ npm install --save-dev babel-loader

babel-polyfill 설치

babel-polyfill을 설치한다. ES6에서 추가된 Promise, Object.assign, Array.from 등은 ES5 이하로 트랜스파일링하여도 대체할 기능이 없기에 Babel을 사용하여도 트랜스파일링이 안되고 남아있을 수 있기 때문이다.

$ npm install @babel/polyfill

webpack.config.js 파일의 entry 배열에 추가한다.

// webpack.config.js
const path = require('path');

module.exports = {
  // entry files
  entry: ['@babel/polyfill', './src/js/main.js'],
  ...

webpack으로 Sass 컴파일하기

컴파일된 css를 bundle.js 파일에 포함시키자

$ npm install node-sass style-loader css-loader sass-loader --save-dev

webpack.config.js : 엔트리(entry)

ES 모듈 형식으로 개발할 때 시작이 되는 지점을 넣어주는 곳이다. 웹팩은 엔트리로 지정된 파일을 통해 필요한 모듈을 로딩해서 하나로 묶을 수 있다.

module.exports = {
  entry: {
    main: "./src/main.js",
  },
}

그럼 js 랑 scss를 같이 번들링하고 싶다면?

 entry: ["./public/src/main.js", "./public/sass/main.scss"],

배열로 entry를 적어주면 된다!

webpack.config.js: 아웃풋

번들된 결과물(bundle.js)가 저장될 곳이다.

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "http://localhost:3000/dist",
  },

Webpack

Wepack-dev-middleware

webpack middleware는 이미 존재하는 express서버에 webpack에서 컴파일한파일을 전달해준다.메모리에서 bundling된 파일을 이용하기 때문에 실제로 file 구조상에서 확인하기 어렵다.

express 서버와 webpack middle ware 연동하기

express
server.js 파일을 생성한다.

const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const webpackConfig = require("./webpack.config.js");
const compiler = webpack(webpackConfig);
const express = require("express");
const port = 3000;
const app = express();
app.use(express.json());

app.get("/", (req, res, next) => {
  next();
});

app.use(
  webpackDevMiddleware(compiler, {
    publicPath: webpackConfig.output.publicPath,
    stats: { colors: true },
  })
);

app.use(express.static(__dirname));

app.listen(port, () => {
  console.log(`서버 구동중 http://localhost:${port}`);
});

https://d2.naver.com/helloworld/0239818
https://hoony-gunputer.tistory.com/entry/webpack-middleware [후니의 컴퓨터]
https://poiemaweb.com/es6-babel-webpack-2
https://foglove.tistory.com/6