[webpack] 웹팩5 (2) - 기본설정 출력해보기, 웹팩4와 달라진 점

지난 포스팅에 이어서 작성합니다.
5버전 기준이며 웹팩5는 Node 10.13.0 이상에서 실행됩니다.

핵심개념

1. Entry - 종속성을 구성하게되는 시작점

2. Output - 생성되는 번들파일을 출력하는 위치 및 이름

3. Loaders - js, json외 다른 여러가지 모듈을 웹팩이 이해하기 위해 존재한다.

4. Plugins - 모듈을 읽고 번들링하는 단계보다 좀 더 넓은 작업범위에 관여하는 것 들, 번들링이 끝난 뒤, 번들링 시작 전 등의 단계에서 동작하도록 정의할 수 있다.

5. Mode - production , none , development 중 하나의 타입이 필요하다, 기본값은 production이며, 설정파일 내에서도 사용할 수 있고, DefinePlugin 에서 process.env.NODE_ENV의 값을 설정한다.

6. BrowserCompatibility - 웹팩은 IE8이하를 제외한 모든 브라우저를 지원한다.

---

웹팩 기본설정 알아보기

웹팩 4.0.0 이상 부터는 설정파일은 필요없습니다. 웹팩이 기본설정을 이용하는데, 이 때 사용되는 기본설정을 알아보겠습니다.

설치

yarn add -D webpack
yarn add -D webpack-cli
yarn add javascript-stringify

1. 세가지 모드 기본구성 (production, development, none)

웹팩 세가지 모드에서의 기본 설정을 출력해보겠습니다.
기본구성을 가져오는 소스코드 기본경로는 webpack/lib/WebpackOptionsDefaulter.js 입니다.

• WebpackOptionsDefaulter 소스코드

const { applyWebpackOptionsDefaults } = require("./config/defaults");
const { getNormalizedWebpackOptions } = require("./config/normalization");

class WebpackOptionsDefaulter {
	process(options) {
		options = getNormalizedWebpackOptions(options);
		applyWebpackOptionsDefaults(options);
		return options;
	}
}

module.exports = WebpackOptionsDefaulter;

• 설정파일 생성하기

// generateWebpackConfig.js
const WebpackOptionsDefaulterClass = require("webpack/lib/WebpackOptionsDefaulter");
const {stringify} = require('javascript-stringify');
const fs = require('fs');
const webpackDefaulter = new WebpackOptionsDefaulterClass();

// 설정파일 생성함수
const generateOptions = mode => {
    const options = webpackDefaulter.process({mode});
    fs.writeFileSync(`./webpack.${mode}.config.js`, 'module.exports = ' + stringify(options));
}

// 모드별 설정파일 생성
['none','development','production'].forEach(generateOptions);

터미널에서 명령어를 입력합니다.

node generateWebpackConfig

아래 사진처럼 설정파일들이 생성된 것을 확인할 수 있습니다.

생성된 파일들을 열어보면 서로 다른점들이 있는데 대부분 최적화 관련, 개발 관련된 부분이고, 소스맵 생성이나 성능등에 대해 알맞게 설정되어있습니다.

production 리소스 접근에 대해 최적화 되어있고, development는 디버깅에 최적화 되어있습니다.
none모드는 development와 비슷하지만 선택하지 않는게 좋습니다.

각 파일의 코드는 너무 길어서 생략했습니다.
기본 작성법은 지난 포스팅 을 참고해주세요.

2. 기본설정으로 번들링해보기

아래와 같이 src/utils/add.js, src/index.js를 생성했습니다.
웹팩은 기본설정으로 entry를 프로젝트 루트의 src폴더로 설정되어있습니다.
위 과정에서 생성한 기본설정파일을 열어 확인해보세요

잘 번들링 되도록 기본경로에 맞춰 파일들을 생성했습니다.



// src/index.js
import add from "./utils/add";

const a = 1;
const b = 2;
add(a, b);

// /src/utils/add.js
export default function add(a, b) {
  console.log("a = ", a);
  console.log("a = ", b);
  console.log("a + b = ", a + b);
  return a + b;
}

webpack-cli를 터미널에서 실행해보겠습니다.

npx webpack-cli --mode production

dist폴더에 main.js라는 번들파일이 생성되었습니다.

(()=>{"use strict";console.log("a = ",1),console.log("a = ",2),console.log("a + b = ",3)})();

모듈시스템을 사용했기 때문에 IIFE로 감싸있다는 것을 알 수 있네요

아까 만들었던 webpack.production.config.js를 열어서 보면 output설정(번들파일 출력경로)에 맞게 생성된 걸 알 수 있습니다.
기본설정이 아니라 해시값을 섞어넣고 싶다거나 캐싱, 난독화, 코드압축 등을 하고싶다면 설정파일을 작성해 세부적으로 설정할 수 있습니다.

---

webpack4와 달라진 점

webpack4 버전에서도 최적화 관련 플러그인이 기본옵션을 통해서 설정할 수 있다거나, 최적화 플러그인이나 설정이 기본설정에 포함되는 등 간편한 방향으로 바뀌었던 것 같은데, webpack5에서는 어떤 것들이 바뀌었을까요

1. 성능

Upgrading Webpack 4 → 5의 글을 보면 동일한 코드를 webpack4, webpack5에서 빌드하며 테스트한 자세한 내용을 확인할 수 있습니다.

간단하게 요약해보면
번들사이즈 감소 (tree shaking 최적화), 개발 빌드타임 (영구캐싱 일부사용), 프로덕션 빌드타임 감소, 경고 개선(더 엄격하게 사용자에게 알림) 등의 내용입니다.

2. 알아둬야할 점

웹팩 4->5 마이그레이션 가이드를 보면 변경된 내용들이 세세하게 나와있는데 삭제해야할 옵션, 수정해야할 옵션 등이 있습니다.

아래 내용은 그 중 몇 가지 알아둬야할 것들입니다.
내용이 많아 개인적으로 기억해둘 것만 정리합니다.

• webpack5에서는 nodejs가 기본 폴리필되지 않는다는 것
  프론트에서 nodejs의 내장모듈들을 기본으로 사용하려면 직접 폴리필하거나 사용하지 말아야합니다.

• JSON모듈에서 더 이상 지원되지않는 형식
  

• Comparison of three default configurations of webpack5 modes
• 웹팩 공식문서
• Upgrading Webpack 4 → 5