배경

프론트엔드 프로젝트를 진행하면서 간단하게 구현할 생각으로 바닐라 자바스크립트를 이용해서 구현을 하고 있었다. 하지만 기능이 추가되면서 점점 더 JS 코드도 많아지고 분리를 할 필요가 느껴졌다. React로 개발을 해봤었던 터라 컴포넌트 단위로 코드를 분리하는 것은 당연하게 생각되었다. 하지만 프레임워크 없이는 코드 분리도 쉽게 구현되지 못한다.

이를테면 React에서는 분리된 코드가 자동으로 빌드되어 HTML에 입력이 되었다.
하지만 바닐라 자바스크립트로는 분리된 코드들을 하나하나 <script>태그로 입력해야했다.
아직은 프로젝트가 크지 않아서 문제는 없지만, 추후에는 이 문제로 인해 병목현상이 생긴다고도 한다.

일전에 React기반 어플리케이션의 틀만 create-react-app 없이 만들어본 경험이 있다.
그 때 썼던 Webpack이 현재 겪고 있는 문제를 풀어줄 것이라 생각했다.

Webpack

Why webpack

Webpack을 이용하는 이유를 더 알아봤다. 우선 webpack 홈페이지에 개념을 설명하는 글에서 이전까지 브라우저에서 JavaScript를 사용했던 방법을 소개한다.

• 각 기능이 있는 스크립트를 추가한다. -> 많은 스크립트로 인해 네트워크 병목 유발
• 하나의 거대한 .js 파일을 만들어 사용 -> 유효범위, 크기, 가독성, 유지보수에 문제를 발생시킨다.

이 문제를 해결하기 위해서 태스크러너 툴들이 만들어져 사용되었지만, 빌드 최적화 문제가 이어졌다고 한다.

이후 브라우저 외부 환경에서 작동하는 JavaScript 런타임, Node.js가 등장하고 require를 이용한 CommonJS가 출시되어 모듈을 불러와 사용할 수 있게 되었다. 하지만 CommonJS는 브라우저에서는 지원이 안되는 기능이다.

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.

Webpack은 자동 빌드, Import-Export 항목 기반 디펜던시 그래프 추론을 한다. 이는 개발자 경험을 개선시킨다.

개념

1. Entry
   Entry Point 모듈을 설정해, 여기서부터 직간접적으로 의존하는 다른 모듈들과 라이브러리를 찾아낸다.
2. Output
   생성된 번들을 내보낼 위치와 파일의 이름을 설정한다.
3. Loaders
   Loaders를 이용하여 JS, JSON파일 이외 유형의 파일도 처리하거나, 유효한 모듈로 변환하여 의존항목에 추가한다.
4. Plugins
   Loaders와는 다르게 번들 최적화나, 애셋 관리, 환경변수 주입 등과 같은 광범위한 작업을 할 수 있다.
5. Mode
   development, production, none으로 설정하여 환경별 최적화를 가능하게 한다.
6. Browser Compatability
   ES5가 호환되는 모든 브라우저를 지원한다.

적용

우선 프로젝트에 webpack을 npm으로 설치한다. 참고로 webpack이 빌드하는 환경은 브라우저 외부 환경인 것 같다.

[Webpack 설치]

> npm install -D webpack webpack-cli

[파일 구성]

+- dist
	+- index.html
	+- main.js(빌드되는 파일)
+- src
	+- index.js
    +- style.css
+-- webpack.config.js

index.html에서는 빌드 후 생성되는 main.js 파일만 스크립트를 입력해주면 된다.
빌드는 터미널에서 다음을 입력하면 된다.

// 기본
> npx webpack
// 개발 모드
> npx webpack --mode development

webpack.config.js를 작성하려고 한다. 참고로 webpack 4.0 이후부터는 설정을 따로 만들 필요 없이 자동 빌드되기는 한다. 하지만 역시 복잡한 기능을 사용하기 위해서는 설정이 필수적이다. 이번에는 복잡하지는 않지만 프로젝트의 확장 여지도 생각하고 공부 겸 설정 파일을 만들어줬다.
CSS 파일은 webpack이 자체적으로 처리할 수 없는 애셋이기 때문에 로더를 설치하고 불러줘야 한다. 이 때문에 먼저 터미널에서 npm으로 로더를 설치하자.

[CSS loader 설치]

> npm install -D css-loader style-loader

[webpack.config.js]

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$\i/,
                type: 'asset/resource',
            }
        ]
    }
}

이미지는 webpack5 부터 내장된 Asset Modules로 가져올 수 있다한다.

[의존성 추가]

// index.js
import './style.css';

...(이하 생략)

기존 index.js에 적용할 css파일을 import해오면 이제 webpack이 알아서 js 파일과 css 파일이 번들된 파일을 생성해준다.

레퍼런스

• Webpack DOC: Why webpack
• Webpack DOC: Concept