webpack2. 개념

목차

1. 웹팩이란?
2. 웹팩을 이해하기 위한 핵심 개념(entry / output / loaders / plugin / mode / browser compatibility )
3. 진입점(entry point)
4. 출력(output)
5. 로더(loaders)
6. 플러그인(plugin)
7. 모드(mode)
8. 브라우저 호환성(browser compatibility)
9. 환경(environment)

 

 

 

---

 

 

1. 웹팩이란?

• 웹팩은 모던 자바스크립트 어플리케이션을 위한 정적 모듈 번들러
• 웹팩이 어플리케이션을 다룰 때, 내부적으로 하나 또는 다수의 entry points로부터 dependency graph를 만든다.
• 프로젝트에 필요한 모든 모듈을, 컨텐츠를 제공할 정적 자산 인 번들로 결합

 

 

2. 웹팩을 이해하기 위한 핵심 개념

• 진입(Entry)
• 출력(Output)
• 로더(Loaders)
• 플러그인(Plugins)
• 방식(Mode)
• 브라우저 호환성(Browser Compatibility)

 

 

 

3. 진입

• 진입점(Entry point)는 웹팩이 내부 종속성 그래프(dependency graph)의 빌드를 시작하기 위해 어떤 모듈을 사용할 것인지를 나타냄
• (=즉, entry 객체는 웹팩이 어디서부터 번들의 빌드를 시작할 것인지를 나타냄)
• 동적으로 로드된 모듈은 진입점이 아님
• 웹팩은 직접적, 간접적으로 진입점이 의존할 다른 모듈들과 라이브러리들을 알아냄.

<주의>
HTML 페이지당 하나의 진입점을 가짐
-SPA: 하나의 진입점
-MPA: 여러 진입점

 

3-1. 진입점의 디폴트 값

./src/index.js

 

3-2. 웹팩 configuration에서 entry 속성 셋팅

• webpack.config.js

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

 

3-3. 관련 문서

https://webpack.js.org/concepts/entry-points/

 

 

 

4. Output(출력)

• 출력 속성은 웹팩이 번들을 해체하여 이러한 파일들을 생성하고 명명할 위치를 알려줌

 

4-1. 디폴트값

(1) 주 출력 파일; main output file

./dist/main.js

 

(2) 생성된 다른 파일들을 위한 디렉토리

./dist

 

4-2. 웹팩 configuration에서 output 속성 셋팅

• output.filename과 output.path 속성의 속성값으로 위치 지정

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

 

 

 

 

5. 로더(loaders)

5-1. 로더란?

• 기본적으로 웹팩은 오직 JS와 JSON파일만을 이해함.
• 로더를 통해 웹팩은 다른 유형의 파일들도 처리할 수 있게 되며,
• 그러한 다른 유형의 파일들은, 어플리케이션에서 사용되고 종속성 그래프(dependency graph)에 추가될 수 있는, 다른 유효한 모듈로 전환될 수 있게 됨

 

 

5-2. 로더의 두가지 속성

상위 수준에서, 로더는 웹팩 configuration에서 두 가지 속성을 가짐.

• test 속성- 변환할파일을 식별
• use 속성- 변환하기 위해 사용될 로더를 식별

 

5-3. 웹팩 configuration에서 rules 속성 정의하기

const path = require('path');

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

 

• 위의 configuration은 하나의 모듈에 대한 rules 속성을 정의하며, rulse 속성은 두개의 필요 속성인 test와 use를 가짐.
• 위 코드는 웹팩의 컴파일러에게 아래와 같이 전달함.
• 'require() / import 구문 내부에서 확장자명이 text 인 파일로 해석되는 경로를 발견하게 된다면, 번들에 그것을 추가하기 전에 raw-loader를 사용하여 변환시켜라'

 

<주의>
webpack config에서 rules 속성을 정의하는 것은, rules가 아닌 module.rulses 하에서 정의하고 있는 것이다.

 

 

6. 플러그인(plugins)

6-1. 플러그인의 역할

• 로더는 특정 모듈에 대한 변환을 위해 사용되는 반면, 플러그인은 번들 최적화, 자산 관리, 환경 변수의 주입 등과 같은 더 넓은 범위의 역할을 수행함.

 

6-2. 플러그인 사용

• 플러그인을 사용하기 위해서는 require()메서드를 사용하여 plugins 배열에 추가해야 함.
• 대부분의 플러그인은 options를 통해 커스터마이징 가능함.
• 목적에 따라 하나의 configuration에서 플러그인을 여러번 사용할 수 있으므로, new 연산자를 사용하여 plugin의 인스터를 호출>생성하자.

 

• 아래의 코드에서 require 해 온 html-webpack-plugin은 앱에 대한 HTML 파일을 생성하며, 생성된 모든 번들을 자동적으로 파일에 주입함.

const HtmlWebpackPlugin = require('html-webpack-plugin');
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' })],
};

 

7. 모드(mode)

7-1. 모드의 유형

• development
• production(디폴트)
• none

 

7-2. 모드 설정

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

 

 

8. 브라우저 호환성( Browser Compatibility)

• 웹팩은 ES5와 호환되는 모든 브라우저를 지원함
• import()와 reuiqre.ensure()를 쓰기 위해서는 Promise를 사용할 필요가 있음
• 만약 이전 브라우저를 지원하기를 원한다면, 이러한 표현식을 사용하기 전에 polyfill을 로드해야 함

 

 

9. 환경(Environment)

• 웹팩5는 NodeJS 버전 10.13.0+이상에서 실행됨