[Webpack] Webpack이 뭐지..?

Concepts | 웹팩

 

이 포스팅은 내가 이해하기 편하게 작성되었고, 정확한 정보는 Document 문서를 확인하는 것이 좋다. (거짓을 적겠다는 것은 아님..)

 

Webpack

웹팩은 JS 애플리케이션을 위한 정적 모듈 번들러이다.

웹팩이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 Dependency Graph를 만든다.

정적 모듈 번들러
js는 웹페이지를 호출할 때 모듈들을 url을 통해 가져올 수 있다.
하지만 그렇게 되면 우리는 페이지를 불러올 때 마다, url를 통해 가져오는 시간을 기다려야할 것이다.
정적으로 모듈을 미리 웹서버에 가져다 놓는다면 더 빨리 페이지를 불러 올 수 있다.
이러한 모듈을 하나로 합쳐주는 도구가 정적 모듈 번들러이다.

 

* Dependency Graph

하나의 파일이 다른 파일에 의존할 때마다 웹팩은 이것을 의존성으로 취급한다.

웹팩은 asset을 가져와 애플리케이션에 의존성으로 제공한다.

 

웹팩은 애플리케이션을 처리할 때, 커맨드 라인 또는 설정 파일에 정의된 모듈 목록에서 시작한다.

Entry point에서 시작하여, 웹팩은 애플리케이션에 필요한 모든 모듈을 포함하는 디펜던시 그래프를 재귀적으로 빌드한다음, 모든 모듈을 브라우저에 의해 로드되는 번들로 묶는다.

 

Entry

엔트리 포인트는 웹팩 내부의 디펜던시 그래프를 생성하기 위해 사용하는 모듈이다.

웹팩은 엔트리 포인트가 의존하는 다른 모듈과 라이브러리를 찾아낸다.

기본 경로는 ./src/index.js 이지만, webpack 설정에서 entry 속성을 설정하여 다른 또는 여러 엔트리 포인트를 지정할 수 있다.

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

 

Output

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

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

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

 

상단의 path는 파일 경로를 지정하기 위해 사용되는 core Node.js 모듈이다.

 

Loaders

웹팩은 기본적으로 JS와 JSON파일만 이해한다. 로더를 사용하면 다른 유형의 파일을 처리하거나, 모듈로 변환하여 애플리케이션에서 사용하거나 디펜던시 그래프에 추가한다.

 

상위 수준에서 로더는 웹팩 설정에 두 가지 속성을 가진다.

• test : 변환이 필요한 파일을 식별하는 속성
• use : 변환을 수행하는데 사용되는 로더를 가리키는 속성

const path = require('path');

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

 

위 rules 에 의미를 해석하면 다음과 같다.

require() / import 문 내에서 '.txt' 파일로 확인되는 경로를 발견하면 raw-loader를 사용하여 변환하여 번들로 추가하라.

 

로더를 정의할 때, module.rules에 입력하는 것을 주의하자.

또 test는 따옴표를 사용하지 않는다. '/\.txt$/'는 웹팩에 .txt.로 끝나는 모든 파일과 일치하도록 지시하고, "/\.txt$/"는 웹팩에 절대 경로 .txt를 가진 단일 파일과 일치하도록 지시한다.

 

Plugins

플러그인은 번들을 최적화하거나, 에섯을 관리하고, 또 환경 변수 주입등과 같은 광범위한 작업을 수행 할 수 있다.

플러그인을 사용하려면 require()를 통해 플러그인을 요청하고 plugins  배열에 추가해야한다.

플러그인을 여러 번 사용하도록 설정할 수 있으므로 new 연산자로 호출하여 플러그인의 인스턴스를 만들어야 한다.

 

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

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

 

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

 

Mode

mode 파라미터를 development, production, none으로 설정하여 웹팩에 내장된 환경별 최적화를 활성화 할 수 있다.

기본값은 production이다.

옵션	설명
development	DefinePlugin의 process.env.NODE_ENV를 development로 설정합니다. 모듈과 청크에 유용한 이름을 사용할 수 있습니다.
production	DefinePlugin의 process.env.NODE_ENV를 production으로 설정합니다. 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 mangled name을 사용할 수 있습니다.
none	기본 최적화 옵션에서 제외