모던 자바스크립트

Webpack

웹팩(Webpack)은 모던 JavaScript 애플리케이션 개발에 사용되는 모듈 번들러(Module Bundler) 입니다.

실습

실습을 위한 디렉토리를 생성한 후, 생성된 디렉토리로 이동합니다.

1. 디렉토리

$ mkdir webpack-babel-eslint && cd $_

2. 초기화

yarn 초기화(init) 명령을 사용해 package.json 파일을 생성합니다.

yarn init -y

3. Webpack 설치

webpack, webpack-cli 패키지를 프로젝트에 설치합니다.

$ yarn add webpack webpack-cli -D

NOTE

webpack-cli 도구는 CLI 명령어 환경에서 webpack 명령을 실행하는데 사용됩니다.

4. 테스트 파일

ES 모듈 번들링을 테스트 할 src/index.js, src/components.js 파일을 만듭니다.

src/components.js

export const y9Button = (content='버튼', type='button') => {
  return `
    <div class="y9-button-wrapper">
      <button
        type="${type}"
        class="y9-button"
      >
        ${content}
      </button>
    </div>
  `;
};

src/index.js

import { y9Button } from './components.js';

const htmlCode = ['webpack', 'babel', 'eslint'].map(content => y9Button(content)).join('');
document.body.insertAdjacentHTML('afterbegin', htmlCode);

5. Webpack 설정 파일

webpack.config.js 파일을 만든 후, 아래와 같이 작성합니다.

const path = require('path');

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

6. 번들링

webpack 명령을 실행하면 번들링이 수행됩니다.

# npx webpack --config webpack.config.js
$ npx webpack

7. bundle 명령

NPM 스크립트 명령 bundle을 package.json 파일에 추가합니다.

package.json

"scripts": {
  "bundle": "webpack"
}

등록된 NPM 스크립트 명령을 명령창에서 실행해볼 수 있습니다.

$ yarn bundle

8. watch 명령

NPM 스크립트 명령 watch을 package.json 파일에 추가합니다.

package.json

"scripts": {
  "bundle": "webpack",
  "watch": "webpack -w"
}

등록된 NPM 스크립트 명령 watch를 실행하면 지속적으로 파일의 변화를 감지하여, 변화가 감지되면 번들링을 수행합니다.

$ yarn watch

참고

보다 자세한 사용법은 Webpack 문서를 참고하세요.

← Babel →