Webpack - 웹팩 개념 및 시작하기 (1)

이번 포스트부터는 Webpack(이하 웹팩)에 대해서 소개할까 합니다.

이번 포스트에서는 가장 기본적인 웹팩 소개와 사용법에 대해서 알아보겠습니다. 대부분 내용은 웹팩 공식 홈페이지의 내용과 동일합니다. 더 자세한 내용과 샘플 코드를 확인하고 싶으시다면 공식 페이지에서 확인하시기를 권장합니다. 그럼 시작하겠습니다.

웹팩 (Webpack) 이란?

웹팩은 오픈 소스 자바스크립트 모듈 번들러입니다.

주로 최신 Javascript를 위한 정적 모듈 번들러이지만 호환 플러그인을 사용하여 HTML, CSS과 image와 같은 assets 파일들을 변환할 수 있습니다. 웹팩은 의존성이 있는 모듈을 취하여 해당 모듈을 대표하는 정적 자산을 생성합니다.

웹팩은 의존성을 취한 다음 의존성 그래프를 만들어 웹 개발자들이 웹 애플리케이션 개발 목적을 위해 모듈 방식의 접근을 사용할 수 있게 도와줍니다. 간단하게 webpack.config.js 라는 구성파일을 생성 및 설정만으로 프로젝트 로더, 플러그인 등을 정의할 수 있습니다.

핵심 개념

웹팩을 시작하려면 몇가지 핵심 개념만 이해하면 됩니다.

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

위에서 나열한 핵심 개념은 아래에서 좀더 자세하게 소개하도록 하겠습니다.
또한 모듈 번들러의 개념과 내부에서 작동하는 방식을 더 이해하고 싶으시다면 다음 리소스를 참조하세요.

• Manually Bundling an Application (수동으로 애플리케이션 번들링)
• Live Coding a Simple Module Bundler (간단한 모듈 번들러 라이브 코딩)
• Detailed Explanation of a Simple Module Bundler (간단한 모듈 번들러에 대한 설명)

Entry (진입점)

Entry 는 웹팩이 내부 종속성 그래프 작성을 시작하는데 사용해야하는 모듈을 가리킵니다.
웹팩은 진입점이 직접 또는 간접적으로 의존하는 다른 모듈과 타사 라이브러리를 알아낼 수 있습니다.

기본적인 값은 ./src/index.js 이지만 webpack.config에서 항목 속성을 수정하여 다른 (또는 여러) Entry 지점을 지정할 수 있습니다.

예를들면,

// webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Entry에 대한 자세한 내용은 다음 포스트에서 소개하도록 하겠습니다.

Ouput (결과물)

output속성은 웹팩이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다.
기본 output 설정은 ./dist/main.js 로 기타 생성된 파일의 경우 ./dist 폴더가 기본값입니다.

webpack.config에서 output 필드를 구성할 수 있습니다.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',ㄴ
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

위의 예에서 output.filename 및 output.path 속성을 사용하여 웹팩에 번들의 이름과 번들을 내보낼 위치를 알려줍니다. 상단에서 가져오는 경로 모듈이 궁금한 경우 파일 경로를 조작하는 데 사용되는 핵심 Node.js 모듈입니다.

Loaders (로더)

기본적으로 웹팩은 Javascript 및 Json파일만 이해합니다.
로더를 사용하면 웹팩이 다른 유형의 파일을 처리할 수 있고, 이를 애플리케이션에서 사용하여 종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.

모든 유형의 모듈을 가져올 수 있는 기능, 예를 들자면 .css 파일은 웹팩에 특정한 기능이며 다른 번들러 또는 작업 실행기에서 지원하지 않을 수 있습니다. 개발자가 보다 정확한 종속성 그래프를 구축할 수 있기 때문에 이러한 언어 확장이 보장된다고 생각합니다.

상위 수준에서 로더는 웹팩 구성에 두 가지 속성을 가지고 있습니다.

• test 속성은 변환해야하는 파일을 식별합니다.
• use 속성은 변환을 수행하는데 사용해야하는 로더를 나타냅니다.

// webpack.config.js

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

위의 구성은 test 및 use 두가지 필수 속성이 있는 단일 모듈에 대한 규칙 속성을 정의하고 있습니다. 이것은 웹팩의 컴파일러에게 다음을 알려줍니다.

웹팩 컴파일러야, require() / import 문 내에서 ‘.txt’ 파일로 해석되는 경로를 발견하면 번들에 추가하기 전에 원시 로더를 사용해 변환해줘!

웹팩 구성에서 규칙성을 정의 할 때 규칙이 아닌 module.rules 아래에 규칙을 정의한다는 점을 기억하는 것이 중요합니다. 정규식을 사용하여 파일을 일치시킬때 인용할 수 없습니다. 즉 /.txt$/는 ‘/.txt$/’또는 “/.txt$/”와 동일하지 않습니다. 전자는 webpack에 .txt로 끝나는 모든 파일과 일치하도록 지시하고 후자는 webpack에 절대 경로 ‘.txt’를 가진 단일 파일과 일치하도록 지시합니다. 이것은 당신의 의도가 아닐 것입니다.

Plugins (플러그인)

로더는 특정 유형의 모듈을 변환하는데 사용되지만 플러그인을 활용하여 번들 최적화, 자산관리 및 환경 변수 삽입과 같은 광범위한 작업을 수행 할 수 있습니다.

플러그인 인터페이스와 이를 사용하여 웹팩의 기능을 확장하는 방법을 확인하세요.

플러그인을 사용하려면 이를 require() 하고 플러그인 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있습니다. 다른 목적으로 구성에서 플러그인을 여러번 사용할 수 있으므로 new 연산자로 호출하여 플러그인의 인스턴스를 생성해야 합니다.

// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

위의 예에서 html-webpack-plugin은 생성된 모든 번들을 자동으로 삽입하여 애플리케이션용 HTML 파일을 생성합니다.

웹팩이 제공하는 많은 플러그인이 있습니다. 플러그인 목록에서 확인해 보세요.

webpack config 에서 플러그인을 사용하는것은 간단합니다. 그러나 추가로 살펴볼 가치가 있는 사용예가 많이 있습니다. 여기를 자세히 알아보세요.

Mode (모드)

mode 매개 변수를 development’, production’ 또는 none으로 설정하여 각 환경에 해당하는 웹팩의 내장 최적화를 활성화 할 수 있습니다. 기본값은 production’ 입니다.

// webpack.config.js

module.exports = {
  mode: 'production'
};

Browser Compatibility (브라우저 호환성)

웹팩은 ES5를 준수하는 모든 브라우저를 지원합니다. (IE8 이하는 지원하지 않습니다)
웹팩에는 import() 및 require.ensure()에 대한 Promise가 필요합니다. 이전 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 polyfill을 불러와야 합니다.

Environment (실행 환경)

웹팩은 Node.js 버전 8.x 이상에서 실행됩니다.

지금 까지 간단하게 웹팩에 대한 소개 및 핵심 개념에 대해 알아보았습니다. 대부분의 내용은 웹팩 공식 페이지의 내용과 동일합니다.
그럼, 다음 포스트부터는 웹팩 구성에 필요한 요소들에 대해서 자세히 알아보도록 하겠습니다.