Webpack ?

Webpack

자바스크립트 애플리케이션의 모듈 번들러로 사용되는 도구 

 

하나 이상의 진입점에서 내부적으로 종속성 그래프를 구축한 다음

프로젝트에서 사용하는 모든 자바스크립트 파일을 하나 또는 여러 개의 번들 파일로 결합함

 

- entry

내부 종속성 그래프를 시작하기 위해 웹팩이 사용해야 하는 모듈

Webpack은 진입점이 의존하는 다른 모듈과 라이브러리를 파악함

 

기본값 : ./src/index.js

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

 

- output

webpack이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법

기본값 : ./dist/main.js

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

 

- loader

webpack은 JavaScript, JSON파일만 이해하기 때문에 로더를 사용하여 다른 유형을 파일을 처리할 수 있게 함

test : 변환해야 하는 파일 식별

use : 변환을 수행하는 데 사용해야 하는 로더 나타냄

const path = require('path');

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

 

- plugin

번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행

 

- mode

각 환경에 해당하는 웹팩 내장 최적화 활성화

 

---

https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/webpack-dev-server

Webpack 개발 서버 | Webpack 러닝 가이드

https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/multi-page-application

Webpack 멀티 페이지 설정 | Webpack 러닝 가이드