webpack concept

웹팩 공식 문서를 정독하며 글을 정리해보겠습니다.

entry

entry는 번들되는 파일들을 설정합니다.
기본값은 ./src/index.js

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

다음과 같이 entry를 작성하면 ./path/to/my/entry/file.js에 파일이 번들되는 것입니다.

output

output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 합니다.

기본 출력 파일의 경우에는 ./dist/main.js로 , 생성된 기타 파일의 경우에는 ./dist 폴더로 설정됩니다.

// wepback.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',
  },
};

현재 경로에 dist라는 폴더안에다가 my-first-webpack.bundle.js라는 파일 이름으로 내보내는 것입니다.

Loaders

로더는 webpack 설정에 두 가지 속성을 가집니다.

1. 변환이 필요한 파일(들)을 식별하는 test 속성
2. 변환을 수행하는데 사용되는 로더를 가리키는 use 속성

// webpack.config.js

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

txt확장자인 파일들은 raw-loader 를 이용해 번들 시킵니다.

Plugins

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

Mode

mode 파라미터를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있습니다. 기본값은 production 입니다.

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