[Node.js] Express에 Webpack 구현하기

0. 준비사항 

본인은 프로젝트를 구성할 때 express-generator를 사용하기 때문에 먼저 설치를 해야한다. 

npm i -g express-generator

express-generator는 자동으로 express 환경울 구성해주는 멋진 도구이다. 

 

1. npm 프로젝트 생성

// express 프로젝트명 --view=템플릿
express webpackProject --view=ejs

cd webpackProject
npm i

express-generator를 설치하면 express 명령어를 사용할 수 있는데, 원하는 프로젝트명을 입력하고 

원하는 템플릿을 입력해주면 된다. 

 

템플릿에는 pug, ejs 등이 있는데, 본인은 pug알못이기 때문에 ejs를 사용해서 설치했다. 

명령어를 실행하면 위와 같이 폴더 구조가 형성된다. 

이제 필요한 프로젝트 생성은 완료했다. 

 

2. Babel 구성 

npm i @babel/core @babel/preset-env --save-dev

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "target": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": { "version": 3 }
      }
    ]
  ]
}

필요한 패키지를 설치하고 babel.config.json 파일에 위와 같이 설정해준다. 

 

3. Webpack 구성 

npm install webpack webpack-cli --save-dev

기본적으로 웹팩을 사용하기 위해서 필요한 패키지를 설치했다. 

 

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./public/javascripts/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  // ...
};

entry는 압축하기 위해서 입력받을 자바스크립트 파일을 넣어주면 되고 

output에는 webpack을 사용한 결과물의 위치를 지정해준다. 

 

이제 본격적으로 webpack이 다양한 타입을 이해하고 처리할 수 있게 변환하는 설정을 한다. 

npm i --s-d sass-loader css-loader style-loader babel-loader

 

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./public/javascripts/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: "babel-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.scss$/i,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
};

js 파일을 읽기 위해서 babel-loader를 사용하는데, node_modules 폴더의 파일은 제외시켰다. 

그리고 css를 입력받기 위해서 그 외 loader를 입력받았는데, 

sass-loader -> css-loader -> style-loader 순으로 변경시킨다. 

 

4. package.json 설정

// ...

  "scripts": {
    "start": "NODE_ENV=production webpack && NODE_ENV=production  nodemon ./bin/www",
    "dev": "NODE_ENV=development nodemon ./bin/www",
    "build": "NODE_ENV=production webpack"
  },
  
 // ...

설정을 다하면 build에 webpack으로 변환을 시키는 코드를 작성한다. 

그리고 명령어를 실행했을 때 dist 폴더에 번들링된 파일이 존재하는지 확인하면 된다. 

 

5. express 설정

npm i webpack-dev-middleware -D

// ...

if (process.env.NODE_ENV === "development") {
  app.set("views", path.join(__dirname, "views"));
  app.set("view engine", "ejs");

  app.use(webpackDevMiddleware(compiler, {}));
}
if (process.env.NODE_ENV === "production") {
  app.set("views", path.join(__dirname, "public"));
  app.engine("html", require("ejs").renderFile);
  app.set("view engine", "html");

  app.use(express.static(path.resolve(__dirname, "public")));
}


// ...

webpack-dev-middleware는 웹서버와 웹팩 개발 서버를 한 프로젝트에서 만들 때 사용한다. 

development일 때 사용하는데, 실제 webpack 번들링한 파일을 만들진 않고 내부적으로 만든 코드를

사용한다. 

 

그래서 프론트엔드 코드가 변경되더라도 매번 미들웨어에 의해서 웹팩을 실행한다. 

 

하지만 운영환경의 경우 코드가 변경될 일이 없기 때문에 빌드한 결과물을 public에 담아서 

정적 파일을 제공한다.