번들링

: 웹 애플리케이션 동작에 필요한 HTML, CSS, JavaScript 등의 파일들을 묶어서 제공하는 것

모듈 번들러 (Module Bundler)

: HTML, CSS, JavaScript 등의 자원을 전부 각각의 모듈로 보고, 이를 조합해 하나의 묶음으로 번들링(빌드)해주는 도구

하나의 시작점(entry)으로부터 시작해서, 의존성을 가지는 모든 모듈을 추적하여 하나의 결과물(output)을 만들어준다.

---

🧊 Webpack

: 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

• Webpack에서의 모듈은 JavaScript 모듈에만 국한되는 것이 아니라, HTML, CSS파일과 .jpg, .png와 같은 이미지 파일들도 전부 포함한다.

webpack 공식 문서

빌드 (Build)

: 개발이 완료된 앱을 배포하기 위해 하나의 폴더(directory)로 구성하여 준비하는 작업
e.g. React 앱에서 npm run build를 실행하면, React build 작업이 진행되고, index.html 파일에 압축되어 배포에 최적화된 상태를 제공해준다.

번들링 (Bundling)

: 의존적 관계(import, export)에 있는 파일들을 묶는 작업
빌드 ∋ 번들링

---

Webpack을 사용하면 좋은 점

1. 네트워크 비용 감소

• Webpack이 없다면, 각각의 자원들을 일일히 서버에 요청하여 얻어와야 하지만,
  Webpack이 있다면, 같은 타입의 파일들은 묶어서 요청하여 응답받을 수 있다.

2. 다양한 로더(loader) 제공

• babel-loader : 일부 브라우저에서 지원하지 않는 JavaScript ES6 문법을 ES5로 변환해주는 로더
• scss-loader : SCSS 파일을 CSS 파일로 변환해주는 로더
• vue-loader 등...
  ➡️ 다양한 로더를 지원하여, 개발자가 본인이 원하는 방식으로 개발할 수 있도록 돕는다.

3. Development, Production 모드를 지원

• Production 모드로 번들링할 경우, 코드 난독화, 압축, 최적화(Tree Shaking) 작업을 지원한다.
  즉, Webpack은 사용자 경험(UX)만 개선할 뿐만 아니라, 개발자 경험(DX) 개선에도 기여한다

---

Webpack 설치

npm으로 webpack과 webpack-cli를 설치한다.

npm install -D webpack webpack-cli

webpack은 번들링을 위한 라이브러리로, 실제 애플리케이션에 필요한 모듈은 아니므로 devDependency 옵션으로 설치한다.

---

번들링(빌드)하기

• 터미널에 아래 명령어를 입력해 번들링할 수 있다.

npx webpack

• 혹은 package.json 파일에 아래 스크립트를 추가하여 npm run build로 번들링을 실행할 수도 있다.

"scripts": {
  "build": "npx webpack"
}

하지만, 번들링을 하기 전에 먼저 webpack.config.js 파일을 만들고 설정하는 코드를 작성해줘야 한다.

---

webpack.config.js

webpack.config.js 파일에는 6가지 속성을 작성할 수 있다.

module.export = {
  ...
}

• Entry (시작점)
• Output (결과)
• Loaders (로더)
• Plugins (플러그인)
• Mode (모드)
• Browser Compatibility (브라우저 호환성)

아래에서 각 속성들이 어떤 역할을 하는지 알아보며, 차근차근 작성해보자.

---

Entry

• Entry point는 Webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용하는 모듈이다.
• Webpack은 이 Entry point가 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낸다.
• 기본값은 ./src/index.js 이지만, 다른 파일로 설정하거나 또는 여러 개의 Entry point를 설정할 수 있다.

module.export = {
  entry: './src/index.js', // index.js 파일을 Entry point로 설정한다.
}

---

Output

• output 속성은 생성된 번들을 내보낼 위치와 이 번들 파일의 이름을 지정할 수 있다.
• 기본적으로 dist 폴더가 생성되고, 그 안에 main.js로 저장된다.

const path = require('path'); // path 모듈을 불러온다.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'), // 번들을 내보낼 위치(폴더)
    filename: 'app.bundle.js', // 번들 파일의 이름
  },
};

path 모듈

: 파일이나 폴더의 경로를 편리하게 설정할 수 있는 기능을 제공하는 path 모듈
Node.js 내장 모듈이기 때문에, 별도의 설치없이 require() 구문을 이용해 불러오면 된다.

• path.join()
  : 여러 개의 문자열을 전달인자로 받아 합쳐주는 메소드

path.join('/foo', 'bar', 'baz/asdf');
// 실행 결과 : '/foo/bar/baz/asdf'

• path.resolve()
  : path.join()과 비슷하지만, /를 만나면 절대 경로로 인식하고 그 경로를 반환한다.

path.resolve('/foo/bar', './baz');
// 실행 결과 : '/foo/bar/baz'

path.resolve('/foo/bar', '/baz/asdf');
// 실행 결과 : '/baz/asdf'

__dirname

: file명을 제외한 절대 경로

console.log(__dirname); // /Users/ano/temp

__filename

: file명을 포함한 절대경로

console.log(__filename); // /Users/ano/temp/directory.js

출처 : https://p-iknow.netlify.app/node-js/path-moudle/

---

Loaders

Webpack은 기본적으로 JavaScript와 JSON 파일만 이해한다.
따라서 Webpack이 다른 유형의 파일을 처리하기 위해서는 로더가 필요하다.

로더는 두 가지의 속성을 가진다.

• test : 변환이 필요한 파일을 식별하는 속성으로 정규식으로 작성해야 한다.
• use : 파일을 변환하는 데에 사용되는 로더를 가리키는 속성
• exclude(optional) : 바벨로 컴파일하지 않을 파일이나 폴더를 지정할 수 있다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    // .txt 파일을 발견하면 raw-loader를 사용해 변환하여 번들에 추가한다.
  },
};

---

Plugins

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

• 플러그인을 사용하려면 require() 구문을 이용해 플러그인을 요청하고, plugins 배열에 추가해야 한다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // html-webpack-plugin을 불러온다.

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
  // `html-webpack-plugin`은 번들링 폴더(`dist`) 안에 애플리케이션용 HTML 파일을 자동으로 생성해준다.
};

---

Mode

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

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

---

Browser Compatibility

Webpack은 다양한 환경과 target을 컴파일 한다.

• target의 기본값은 web으로, 적용하지 않으면 이 기본값이 적용된다.
• target에는 web 이외에도 다양한 환경을 컴파일할 수 있는데, esX를 넣으면 지정된 ECMAScript 버전으로 컴파일할 수 있다.

module.exports = {
  target: ['web', 'es5'],
};

---

Optimization(최적화)

Webpack은 최적화를 위한 다양한 옵션이 지원되는데, 대표적으로 minimize와 minimizer 등을 사용한다.

• optimization.minimize
  : TerserPlugin 또는 optimization.minimize에 지정된 플러그인을 사용하여 번들을 최소화한다.

module.exports = {
  ...
  optimization: {
    minimize: false,
  },
};

• optimization.minimizer : 하나 이상의 다른 TerserPlugin 인스턴스를 제공하여 기본 최소화 도구를 다시 설정할 수 있습니다.

module.exports = {
  optimization: {
    minimizer: [new TerserPlugin(),]
  }
};

module.exports = {
  optimization: {
    minimizer: [new CssMinimizerPlugin(),] // mini-css-extract-plugin에 관련된 번들을 최소화시킨다.
  }
};

이 글은 아래의 링크를 참고하여 작성한 글입니다.
https://webpack.kr/concepts/