Rspack을 사용하여 MPA 빌드환경 구축하기

webpack api를 활용한 rspack 1.0이 릴리즈 되었다.

마침 프로젝트 초기 셋팅할 기회가 생겼는데 번들러 설정을 처음부터 해볼 기회라 생각되어 rspack을 한번 찍어먹어 보기로 했다.

 

한 1주일 전부터 프로젝트를 시작한다는 사실은 알고 있어서 이것저것 사용할 기술스택들에 대해 알아보고 있었는데 막상 프로젝트 내용을 들어보니 그렇게 규모가 크지 않았고, 여러 HTML파일로 여러 페이지를 구현해야 했다.

 

그래서 리액트를 사용하지 않고 바닐라JS를 사용하고, typescript도 같이 사용하려는 라이브러리와 이슈가 좀 있어보여서 사용하지 않기로 결정했다.( 하면서 보니 리액트만 사용한다면 더 간단하게 설정을 할 수 있어 보였다. )

 

yarn create rsbuild@latest

 

rsbuild는 rspack에서 제공하는 기능들을 빠르고 쉽게 사용할 수 있게 해준다.

 

대략 이런식으로 폴더마다 html, css, js 파일을 생성해준 기본적인 구조로 되어있다.

 

import { defineConfig } from '@rsbuild/core'

const entryName = process.env.ENTRY_NAME

const entries = {
  maze: ['./src/maze/index.js', './src/common/common.js'],
  sample: ['./src/sample/sample.js', './src/common/common.js']
}

const templates = {
  maze: './src/maze/index.html',
  sample: './src/sample/sample.html'
}

export default defineConfig({
  output: {
    assetPrefix: './'
  },
  source: {
    entry: entryName ? { [entryName]: entries[entryName] } : entries
  },
  html: {
    mountId: 'app',
    template({ entryName }) {
      return templates[entryName]
    }
  }
  // HTML파일 변경 시 재빌드가 빌드 후 단 한번만 실행되는 문제.. 임시로 nodemon 사용중
  //   dev: {
  //     watchFiles: {
  //       type: 'reload-page',
  //       paths: 'src/**/*.html',
  //       options: {
  //         usePolling: true
  //       }
  //     }
  //   }
})

 

defineConfig의 위쪽부터 살펴보겠다.

 

output: {

  assetPrefix: './'

}

 

해당 설정을 하지 않고 빌드를 하면 html에서 연결된 js와 css의 경로 맨 앞에 '/'으로 설정되는 문제 때문에 파일을 제대로 찾지 못하는 현상이 생긴다. 이를 해결하기 위해 해당 설정을 해줬다.

 

source에서는 말 그대로 연결할 소스파일들을 entry 속성에 추가해줄 수 있다. entries에 선언된 .js파일을 모아서 하나의 js 파일로 만들어 주고 예시처럼 여러개의 entry가 존재하면 우리가 원하는대로 html파일이 여러개 생성되게 된다.

여기서 환경변수를 사용해서 전체를 빌드하거나 현재 작업중인 html 관련 코드만 빌드할 수 있도록 했다.

 

html 여기 부분이 좀 특이하다고 생각됬다. rsbuild를 사용하면 애초에 html파일이 없더라도 자동으로 생성해주게 된다.

react와 같은 SPA가 대세다보니 html을 많이 사용할 일이 없고, 이에 맞춘거 같았다.

공식문서를 보면 생성될 html에 필요한 속성들을 변경하고 싶다면 parameter로 설정할 수 있게 되어있다.

원하면 자동으로 생성해주는 옵션을 false로 변경할 수도 있다.

 

여기서는 mountId 옵션과 template을 통해 우리가 만든 HTML을 사용하여 생성될 HTML에 적용하는 방식을 사용한다.

무슨말인가하면 body아래 <div id='app'>{ 작업 }</div> 이렇게 해두고 코드를 추가하면 해당 <div id='app'>부분이 생성될 html의 똑같은 부분에 그대로 들어가게 된다.

 

dev: { watchFiles } 이 부분은 작업중에 브라우저창에 자동으로 업데이트 되도록 설정을 해주려던 것이였는데 이 작업을 하지 않아도 JS나 CSS를 변경하면 자동으로 화면이 업데이트 됬다. 단 HTML을 변경하는 케이스에만 화면이 업데이트 되지 않았다. 해당 방법으로는 빌드 후 단 한번만 변경되고 그 이후에는 변경되지 않았다..

이 프로젝트는 rsbuild를 사용했는데 rspack을 사용하면 rsbuild에는 없는 watch 속성이 있기는 했다.

하지만 이 한가지 때문에 rspack으로 다른 번거로운 작업을 하는건 공수가 더 드는일이라 판단했다.

업데이트 되는 기능 자체는 nodemon --watch 옵션을 사용해서 동작은 했지만, js나 css가 변경됬을때 업데이트 되는 것과 비교하면 성능은 떨어졌다.하지만 크게 거슬리는 부분은 아니여서 그대로 사용할 듯 싶다.

이 부분에서 리액트에서 사용하면 좋을거 같다는 생각이 들었다.

 

 

마지막으로 package.json 파일을 보면서 포스팅을 마치겠다.

{
  "name": "rsbuild-vanilla-js",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "dev": "rsbuild dev --open",
    "dev:maze": "cross-env ENTRY_NAME=maze rsbuild dev --open",
    "dev:sample": "cross-env ENTRY_NAME=sample rsbuild dev --open",
    "build": "rsbuild build",
    "preview": "rsbuild preview",
    "watch:maze": "nodemon --watch src --ext html --exec \"yarn run dev:maze\"",
    "watch:sample": "nodemon --watch src --ext html --exec \"yarn run dev:sample\""
  },
  "devDependencies": {
    "@rsbuild/core": "^1.0.1",
    "cross-env": "^7.0.3",
    "nodemon": "^3.1.4",
    "prettier": "3.3.3"
  },
  "dependencies": {
    "@pixi/app": "^7.4.2"
  }
}

 

Github 살펴보기