자바스크립트 웹팩 시작하기

Webpack은 최근 몇 년 동안 점점 인기를 얻고 있는 Javascript 애플리케이션을 위한 강력한 모듈 번들러이다. 더 나은 성능과 더 작은 파일 크기를 위해 복잡한 웹 애플리케이션을 빌드하고 패키징하는 데 사용된다. 웹팩의 인기가 높아짐에 따라 개발자는 웹팩을 효과적으로 사용하는 방법을 확실히 이해하는 것이 중요한다.

설치 및 설정

웹팩을 시작하려면 먼저 로컬 컴퓨터에 웹팩을 설치해야 한다. 이 작업은 Node.js용 패키지 관리자인 npm을 사용하여 수행할 수 있다. 터미널 창을 열고 다음 명령을 실행하기만 하면 된다.

npm install webpack webpack-cli --save-dev

다음으로 프로젝트의 루트에 webpack.config.js 파일을 만들어야 한다. 이 파일은 웹팩을 구성하고 애플리케이션의 입력 및 출력 지점을 지정하는 데 사용된다. 다음은 간단한 구성 예시이다.

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  }
};

이 예제에서는 애플리케이션의 진입점이 ./src/index.js로 설정되어 있고 출력은 dist 디렉터리에 있는 bundle.js라는 파일이 된다.

기본 웹팩 번들 생성

구성이 완료되었으므로 이제 웹팩을 사용하여 기본 번들을 생성할 수 있다. 이를 위해 터미널에서 다음 명령을 사용한다.

npx webpack

이 명령은 지정된 시작점을 사용하여 필요한 모든 종속성을 dist 디렉터리에 있는 단일 파일에 번들로 묶는다.

로더 및 플러그인 추가

웹팩은 구성이 자유롭고 다양한 로더와 플러그인을 사용하여 확장할 수 있다. 로더는 SCSS를 CSS로 변환하는 등 특정 유형의 파일을 변환하는 데 사용되며, 플러그인은 출력 번들을 최소화하고 최적화하는 등 다양한 작업에 사용된다.

다음은 스타일 로더와 css 로더를 사용하여 CSS 파일을 로드하는 방법의 예시이다.

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }
};

이 예제에서는 스타일 로더와 css 로더를 사용하여 CSS 파일을 로드한다. test 프로퍼티는 .css로 끝나는 파일을 일치시키는 데 사용되

며, use 프로퍼티는 이러한 파일에 사용할 로더를 지정한다.

결론

웹팩은 자바스크립트 애플리케이션을 빌드하고 패키징하기 위한 강력한 도구이다. 설치와 설정이 간편하여 애플리케이션을 최적화하여 더 나은 성능과 더 작은 파일 크기를 원하는 개발자에게 훌륭한 선택이 될 것이다.