Webpack concepts

Webpack이란

Webpack 은 자바스크립트 모듈 번들러이다.

어플리케이션을 빌드할 때, 내부적으로 디펜던시 그래프를 만든다.

디펜던시 그래프는 entry point 로부터 만들어지며, 웹팩은 모든 모듈을 결합하여 하나 이상의 번들로 만든다.

만들어진 번들은 정적 파일로서 브라우저에 서빙된다.

디펜던시 그래프(dependency graph)

하나의 파일이 다른 파일에 의존하는 경우가 있다. 일반적으로 Import / export 문을 통해 모듈이 연결된 경우이다.

이런 경우 webpack 은 이 연결을 디펜던시로 취급한다.

자바스크립트 파일뿐만아니라, 이미지, 웹폰트 등의 자원도 디펜던시로 취급한다.

webpack 이 빌드 프로세스를 수행할때, 설정파일에 명시된 모듈들을 처리한다.

이때 entry point 부터 시작해서, webpack은 디펜던시 그래프를 재귀적으로 생성한다.

디펜던시 그래프는 앱에 필요한 모든 모듈들을 포함한다.

생성 후, webpack 은 해당 모듈들을 적은 수의 번들파일로 생성한다.

Entry

entry point는 webpack이 디펜던시 그래프 생성을 시작할 모듈을 가리킨다. 즉 루트 노드이다.

webpack은 entry point가 의존하는 모듈이나 라이브러리를 이해할 것이다.

기본적으로 세팅되는 값은 ./src/index.js 이다. webpack 설정 파일에서 entry 프로퍼티를 이용해 설정가능하다.

webpack.config.js

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

Output

output 프로퍼티는 웹팩이 생성할 번들을 위치시킬 곳을 지정한다. 그리고 번들 파일의 이름도 관리할 수 있다.
기본파일명은 ./dist/main.js 이고 기본적으로 다른 번들파일들은 dist 폴더에 위치한다.

ouput 프로퍼티를 통해 다음과 같이 설정가능하다.

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

Loaders

별도의 설치가 없으면, webpack은 javascript와 json 파일만 이해한다.
loaders 는 webpack 으로 하여금 다른 타입의 파일들(이미지, css 등) 을 적합한 모듈로 변환할 수 있도록 한다.
해당 모듈이 해석 가능해지면 webpack 이 생성하는 디펜던시 그래프에 추가된다.

loaders는 두가지 프로퍼티로 설정할수 있다.

• test: 변환될 파일명이나 정규식
• use: 변환에 사용할 loader지정

webpack.config.js

const path = require('path');

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

  }

}

위 module 프로퍼티에 해당하는 설정은 다음을 의미한다.

• 웹팩 컴파일러가 .txt확장자를 가진 파일을 require이나 import 문안에서 만날때, 번들에 추가하기전 raw-loader로 처리한다.

주의점

• 매치되는 파일을 적을때 따옴표를 사용하지 않는다.
  • 따옴표 사용시 path로 취급하여 하나의 파일을 찾는다.

Plugins

Loaders는 모듈의 특정 타입을 변환하는데 사용된다.
반면 Plugins 는 번들최적화나 asset관리, 환경변수 주입등의 넓은 범위의 작업 수행 시 사용된다.

플러그인을 사용하기 위해 require 문으로 plugin을 가져와서 설정에 추가한다.
설정을 위한 프로퍼티 키는 plugins 이며 별도 옵션을 전달하여 커스터마이징도 가능하다.
한 플러그인을 여러번 사용하는 경우도 있기 때문에 new 연산자와 함께 호출하여 사용한다.

webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

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

위 plugin 사용 예시는 다음을의미한다.

• html-webpack-plugin 은 html 파일을 생성한다.
• html 파일에 생성된 번들을 모두 주입한다.

Mode

mode 프로퍼티에 development, production, none 중 하나를 세팅할 수 있다.
각 환경에 맞는 webpack 빌트인 최적화를 적용할 수 있다.
기본값은 Production 이다.

webpack.config.js

module.exports = {
    mode: 'production'
}