{"id":"x8iedW","createdAt":"2023-12-10T00:00:00.000Z","updatedAt":null,"title":"번들러와 빌드 도구의 이해","content":"Webpack이나 Parcel, Rollup 등의 번들러(Bundler)는 현대적인 웹 개발의 필수적인 도구입니다.\n최근 들어 번들러의 직접적인 사용보다는, Vite.js이나 Snowpack.js 같은 빌드 도구 혹은 Next.js, Nuxt, Sveltekit 등 프레임워크를 통해 간접적으로 사용하는 경우가 많아졌지만, 번들러의 기본 개념과 동작 원리를 이해하는 것은 여전히 중요합니다.\n이 글에서는, 번들러의 기본 개념과 함께 동작 원리를 이해하기 위한 간단한 예제를 살펴보고, 추가로 빌드 도구에 대해서도 알아보겠습니다.\n\n## 번들러\n\n브라우저 모듈 시스템(Module system)이 아직 표준화되지 않았던 시기에는, 여러 자바스크립트 파일을 단순하게 HTML `\n\n\n

\n \n

\n```\n\n```css --path=/main.css\n.container {\n max-width: 1200px;\n margin: 0 auto;\n}\n.container h1 {\n font-weight: bold;\n}\n```\n\n```js --path=/containerH1.js\nlet title = 'JavaScript!'\nconst h1El = document.querySelector('.container h1')\nh1El.textContent = title\n\nlet isShow = true\nconst buttonEl = document.querySelector('.container button')\nbuttonEl.addEventListener('click', () => {\n isShow = !isShow\n isShow\n ? h1El.style.display = 'block'\n : h1El.style.display = 'none'\n})\n```\n\n```js --path=/containerH2.js --line-error=1\nlet title = 'Bundler!' // Error: Identifier 'title' has already been declared\nconst h2El = document.querySelector('.container h2')\nh2El.textContent = title\n```\n\n간단하게는 다음과 같이 즉시실행함수(IIFE)를 사용하는 지역화를 통해 변수의 중복 선언은 피할 수 있지만, 규모가 조금만 확장돼도 프로젝트에서 모든 파일을 이와 같은 방식으로 관리하긴 어렵습니다.\n\n```js --path=/containerH1.js\n;(() => {\n let title = 'JavaScript!'\n const h1El = document.querySelector('.container h1')\n h1El.textContent = title\n\n let isShow = true\n const buttonEl = document.querySelector('.container button')\n buttonEl.addEventListener('click', () => {\n isShow = !isShow\n isShow\n ? h1El.style.display = 'block'\n : h1El.style.display = 'none'\n })\n})()\n```\n\n```js --path=/containerH2.js\n;(() => {\n let title = 'Bundler!' // OK!\n const h2El = document.querySelector('.container h2')\n h2El.textContent = title\n})()\n```\n\n그러면 다시 즉시실행함수를 사용하기 전으로 돌아가서, 이번에는 번들러를 사용하는 코드로 변경해 봅시다.\nHTML에는 주 스크립트 파일(`main.js`)만 연결하고, 그 파일에서 필요한 각 파일을 가져오도록 작성합니다.\n이제 번들러를 사용하기 때문에 자바스크립트(`*.js`) 파일뿐만 아니라, 구성하기에 따라 `*.css`, `*.scss`, `*.vue`, `*.ts` 등의 다양한 파일을 가져와 사용할 수도 있습니다.\n\n/// message-box --icon=info\n`import` 키워드로 가져오는 스크립트 파일은 모듈로 인식되어, 각 파일의 최상위 범위(Top level scope) `title` 변수는 전역(Global)으로 선언되지 않고, 모듈 내부에서만 유효한 지역(Local) 변수로 선언됩니다.\n///\n\n```html --path=/index.html\n\n\n

\n \n

\n```\n\n```js --path=/main.js\nimport './main.css'\nimport './containerH1.js'\nimport './containerH2.js'\n//\nimport { fade } from './animate.ts'\nimport App from './App.vue'\nimport data from './data.json'\n// ...\n```\n\n이렇게 번들러를 사용하는 환경에서는 예를 들어, `.vue` 확장자를 가진 특수 파일(SFC, Single File Component)을 사용해, 다음과 같이 빠르게 타입스크립트나 SCSS를 적용할 수 있고 컴포넌트를 통해 각 구성 요소를 프로젝트에서 쉽게 생산하고 재활용하며 효율적으로 관리할 수 있습니다.\n\n```vue --path=/Main.vue\n\n\n\n\n\n```\n\n```vue --path=/Sub.vue\n\n\n\n```\n\n하지만, 브라우저는 `.vue` 파일이나 타입스크립트, SCSS 등을 직접 지원하지 않기 때문에, `.vue` 파일을 브라우저가 이해할 수 있는 표준(HTML, CSS, JS)으로 변환해야 합니다!\n\n이러한 개념은 [Webpack 번들러의 홈페이지](https://webpack.kr/)에서 다음과 같이 그림으로 잘 표현하고 있습니다.\n\n![Webpack에서 소개하는 번들러의 기본 개념](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/x8iedW/s1.JPG)\n\n### Webpack\n\n![](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_posts/x8iedW/webpack.png)\n\n[Webpack(웹팩)](https://webpack.kr/)은 대표적인 자바스크립트 번들러로, 많은 기능과 확장성으로 좀 더 복잡한 프로젝트에서도 효율적으로 모듈을 관리할 수 있도록 도와줍니다.\nWebpack은 크게 다음과 같은 기능을 제공합니다.\n\n- 모듈 번들링(Module Bundling): 진입점에 연결된 파일을 단일 파일로 묶어줍니다.\n- 번들 최적화(Automatic Bundle Optimization): 번들 최적화를 통해, 보다 더 작은 번들을 생성하고 그만큼 빠르게 로딩할 수 있습니다.\n- 코드 스플리팅(Code Splitting): 모듈을 청크(chunk)로 분리하여, 동적으로 필요한 모듈만 로딩할 수 있습니다.\n- 트리 쉐이킹(Tree Shaking): 사용되지 않는 코드를 제거해 번들의 크기를 줄이고 성능을 향상시킬 수 있습니다.\n- 개발 서버 실행(Development Server): 코드가 변경될 때마다 브라우저에 반영(HMR)되는 개발용 서버를 실행할 수 있습니다.\n\n다음과 같은 React 프로젝트를 시작하기 위해, Webpack 기반으로 구성해 봅시다.\n\n/// message-box --icon=info\nWebpack 구성의 최종 결과는 [여기](https://github.com/ParkYoungWoong/Bundle_Build_Compare--vite-webpack-parcel/tree/webpack)에서 확인할 수 있습니다.\n///\n\n```plaintext --caption=프로젝트 기본 구조\n├─src/\n│ ├─App.jsx\n│ ├─index.html\n│ ├─main.js\n│ └─main.scss\n├─static/\n│ ├─favicon.ico\n│ └─favicon.png\n├─.swcrc\n├─package.json\n├─package-lock.json\n└─webpack.config.js\n```\n\n```html --path=/src/index.html\n\n\n\n \n \n React x Webpack\n \n\n\n

\n\n\n```\n\n```js --path=/src/main.js\nimport { createRoot } from 'react-dom/client'\nimport App from './App.jsx'\nimport './main.scss'\n\nconst root = createRoot(document.querySelector('#app'))\nroot.render()\n```\n\n```jsx --path=/src/App.jsx\nimport { useState } from 'react'\n\nexport default function App() {\n const [count, setCount] = useState(0)\n return (\n <>\n \n

Count: {count}

\n \n )\n}\n```\n\n```scss --path=/src/main.scss\n$color: red;\nh1 {\n color: $color;\n}\n```\n\n먼저, Webpack 번들러를 사용하기 위한 기본 패키지를 설치합니다.\n\n- `webpack`: 모듈(패키지) 번들러의 핵심 패키지\n- `webpack-cli`: 터미널에서 Webpack 명령(CLI)을 사용할 수 있음\n- `webpack-dev-server`: 개발용으로 Live Server를 실행(HMR)\n\n```bash\nnpm i -D webpack webpack-cli webpack-dev-server\n```\n\nWebpack을 실행할 스크립트를 다음과 같이 `package.json` 파일에 추가합니다.\n\n```json --path=/package.json --line-numbers\n{\n \"scripts\": {\n \"dev\": \"webpack serve --mode development --open\",\n \"build\": \"webpack --mode production\"\n }\n}\n```\n\nWebpack은 `webpack.config.js` 파일을 통해 프로젝트의 구성(Configuration)을 설정합니다.\n다양한 구성 옵션이 있지만, 기본적으로 다음과 같은 옵션이 있습니다.\n\n- 진입점(Entry)\n- 출력(Output)\n- 로더(Loaders)\n- 플러그인(Plugins)\n\n/// message-box --icon=info\n`webpack.config.js` 파일은 프로젝트 루트(Root) 경로 위치해야 하며, 브라우저가 아닌 Node.js 환경에서 실행되기 때문에 CommonJS 모듈 방식으로 작성합니다.\n///\n\n```js --path=/webpack.config.js\nmodule.exports = {\n entry: '', // 진입점\n output: {}, // 출력\n module: { // 로더(모듈)\n rules: []\n },\n plugins: [], // 플러그인\n // 기타 옵션...\n}\n```\n\n#### 진입점\n\n진입점(Entry point)은, Webpack이 프로젝트를 해석하기 시작하는 위치(파일)를 말합니다.\n`entry` 속성을 통해 진입점을 설정할 수 있으며, 기본적으로 자바스크립트 파일입니다.\n\n```js --path=/webpack.config.js\nmodule.exports = {\n entry: './src/main.js'\n}\n```\n\n필요한 경우, 다중 진입점을 사용할 수도 있습니다.\n\n```js --path=/webpack.config.js\nmodule.exports = {\n entry: {\n main: './src/main.js',\n sub: './src/sub.js',\n hi: './src/hi.js',\n // ...\n }\n}\n```\n\n#### 출력\n\n출력(Output)은 Webpack이 생성하는 번들 파일의 이름과 경로를 설정하는 옵션입니다.\n\n/// message-box --icon=info\n`__dirname`은 Node.js CommonJS 모듈 시스템에서 제공하는 전역 변수로, 현재 파일의 절대 경로를 반환합니다.\n///\n\n/// message-box --icon=info\n`dist`는 distribution(배포)의 약어로, '배포될 최종 결과물이 담긴 폴더'라는 의미를 가집니다.\n///\n\n```js --path=/webpack.config.js\nmodule.exports = {\n output: {\n // 기본값,\n // path: path.resolve(__dirname, 'dist'), // 현재 파일의 절대 경로를 기준, dist 폴더에 결과 생성\n // filename: '[name].js', // [name]을 통해 진입점의 파일 이름이 그대로 적용\n clean: true // 결과 생성 전, 기존 결과물 삭제\n }\n}\n```\n\n#### 로더\n\n로더(Loaders)는 Webpack이 `*.js` 파일 외 기타 모듈(파일)을 처리하는 기능으로, `module` 속성을 통해 구성합니다.\n`module.rules` 속성에 배열 형태로 작성하며, 각 규칙은 기본적으로 `test`, `use` 속성을 가집니다.\n\n`test` 속성을 정규표현식(RegExp)으로 작성해, 일치하는 파일을 처리할 수 있도록 지정하고,\n`use` 속성을 통해 해당 파일을 처리할 로더를 명시합니다.\n\n/// message-box --icon=info\n대부분의 로더는 `npm i -D `으로 설치하는 외부 패키지입니다.\n///\n\n다음은 SCSS, CSS, JSX 파일과 여러 이미지 파일을 처리할 수 있도록 구성한 예제입니다.\n\n- `style-loader`: 로드된 스타일(CSS)을 `

\n {{ title }}\n

{{ title }}

Count: {count}