웹팩과 번들러

웹팩의 이해

웹팩(webpack)이란?

웹팩 공식 Github 에서는 웹팩을 모듈(module)을 위한 번들러(bundler) 라고 소개한다.

모듈(module) : 재사용 가능한 코드조각
번들러(bundler): JS, CSS, 이미지 등의 파일을 묶어주는 작업을 번들링(Bundling)이라고 하고, 작업의 결과물은 번들(Bundle)이라고 한다. 마찬가지로 묶어주는 역할을 하는 웹팩(webpack) 같은 친구들을 번들러(bundler) 라고 한다,

웹팩을 사용하는 이유

웹팩을 사용하는이유 근본적으로 번들러(bundler)사용하게 된 이유는 번들러(bundler) 존재하기 전에 웹에서 는 두 가지 방법으로 브라우저에서 JavaScript를 실행했다.

1. 각 기능에 대한 스크립트를 포함해서 사용
2. 모든 프로젝트 코드가 포함된 큰 .js파일을 사용

하지만 이 방법들은 문제점들이 각각 존재했다.

1. 너무 많은 스크립트를 로드하면 네트워크 병목 현상이 발생할 수 있다
2. 범위, 크기, 가독성 및 유지 관리에 문제가 발생합니다.

Node.js 가 등장하면서 JavaScript는 더이상 브라우저 위에서 작동하지 않아도 되었고 여러 모듈들을 가져오는 방식이 자연스러워 지며 모듈을 묵어주는 번들러(bundler) 자연스럽게 인기를 끌었다.

Entry

entry point는 webpack이 내부 dependency-graph 를 작성하기 시작 하는 데 사용해야 하는 모듈을 나타냅니다 . Webpack은 진입점이 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 알아내게 된다.

기본적으로 값은 ./src/index.js

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

웹팩의 주요기능 및 속성

Output

output 속성은 webpack이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다. 기본 출력 파일의 경우 ./dist/main.js 가 기본값이고 , ./dist 으로 생성된 다른 파일의 경우 그 폴더가 기본값입니다.

const path = require('path'); 
//파일 경로를 조작하는 데 사용되는 핵심 Node.js 모듈 입니다.

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 파일만 이해합니다. 로더 를 사용하면 webpack 다른 유형의 파일을 처리 하고 애플리케이션에서 사용하고 종속성 그래프에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.

다른 번들러와 달리 css 파일 및 기타 코드가 아닌 파일들 또한 모듈로 변환 가능하다는 의미

높은 수준에서 loaders 에는 webpack 안에서 두 가지 속성을 가진다.

1. test : 변환해야 하는 파일을 식별하는 속성
2. use : 변환할 때 사용하는 loader를 나타내는 속성

const path = require('path');

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

Plugins

로더는 특정 유형의 모듈을 변환하는 데 사용되지만 플러그인은 번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행하는 데 활용될 수 있습니다.

플러그인을 사용하려면 require() 하고 플러그인 배열을 추가해야 합니다 . plugins 대부분의 플러그인은 옵션을 통해 사용자 정의할 수 있습니다. 플러그인을 다양한 용도로 구성에서 여러 번 사용할 수 있으므로 new연산자로 호출하여 플러그인의 인스턴스를 생성하면 된다.

webpack.config.js

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

Mode

mode 매개변수를 development, production또는 none 로 설정하여 각 환경에 해당하는 webpack의 내장 최적화를 활성화할 수 있습니다. 기본값은 production입니다.

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

---

dependency-graph : webpack이 응용 프로그램을 처리할 때 명령줄 또는 구성 파일에 정의된 모듈 목록에서 시작합니다. 이러한 Entry Points 에서 시작하여 webpack은 애플리케이션에 필요한 모든 모듈을 포함하는 dependency-graph 를 재귀적으로 빌드한 다음 이러한 모든 모듈을 브라우저에서 로드할 소수의 bundle (종종 단 하나) 로 묶습니다.

참고

https://webpack.js.org/concepts/#entry

https://365kim.tistory.com/35

https://jeonghwan-kim.github.io/series/2019/12/10/frontend-dev-env-webpack-basic.html#51-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8%EC%9D%98-%EC%97%AD%ED%95%A0

https://humanwater.tistory.com/2?category=914158