webpack core conceps

웹팩을 공부하면서, 공식 홈페이지에서 Core Concepts부분을 번역하였습니다.

webpack  Core Concepts:

Entry

Output

Loaders

Plugins

Mode

Browser Compatibility

Entry

Webpack이 내부 *dependency graph 구축을 시작하기 위해 사용해야 하는 모듈을 나타냅니다.

Webpack은 entry(진입점)이 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 알아낼 것입니다.

기본적으로 값은 ./src/index.js이지만 Webpack 구성에서 항목 속성을 설정하여 다른(또는 2개 이상의 entry)을 지정할 수 있습니다.

 

예시, webpack.config.js

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

Output

output 속성은 webpack이 생성한 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법을 알려줍니다.

기본 출력 파일의 기본값은 ./dist/main.js이고 생성된 다른 파일의 기본값은./dist 폴더입니다.

구성에서 output 필드를 지정하여 구성할 수 있습니다.

 

예시, webpack.config.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',
  },
};

위의 예제에서 output.filename 및 output.path 속성을 사용하여 Webpack에 번들 이름과 번들을 내보낼 위치를 알려줍니다. 맨 위에 import되는 path 모듈은, 파일 경로를 조작하는 데 사용되는 핵심 Node.js 모듈입니다.

Loaders

기본적으로 Webpack은 JavaScript 및 JSON 파일만 이해합니다.

Loaders를 사용하면 웹팩이 다른 유형의 파일을 처리하고 애플리케이션에서 사용하고 *dependency graph에 추가할 수 있는 유효한 모듈로 변환할 수 있습니다.

 

Loaders에는 웹팩 구성에 두 가지 속성이 있습니다.

1. test 속성은 변환해야 하는 파일을 식별합니다.

2. use 속성은 변환을 수행하는 데 사용해야 하는 Loader를 나타냅니다.

 

예시, webpack.config.js

const path = require('path');

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

위의 예시에서는 test와 use라는 두 가지 필수 속성이 있는 단일 모듈에 대한 규칙 속성을 정의했습니다. 이것은 Webpack의 컴파일러에게 다음을 알려줍니다:

require()/import 문 내에서 '. txt' 파일로 해석되는 경로를 발견하면 번들에 추가하기 전에 raw-loader를 사용하여 변환하세요.

웹팩 설정에서 rules을 정의할 때 규칙이 아니라 module.rules에서 정의한다는 것을 기억하는 것이 중요합니다.

Plugins

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

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

 

예시, webpack.config.js

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

위의 예에서 html-webpack-plugin은 애플리케이션용 HTML 파일을 생성하고 생성된 모든 번들을 이 파일에 자동으로 삽입합니다.

Mode

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

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

Browser Compatibility

Webpack은 ES5와 호환되는 모든 브라우저를 지원합니다(IE8 이하는 지원하지 않습니다).

Webpack은 import() 및 require.ensure()에 대한 Promise가 필요합니다. 이전 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 폴리필을 로드해야 합니다.

Environment

Webpack 5는 Node.js 버전 10.13.0 이상에서 실행됩니다.

 

 

 

*Dependency Graph

한 파일이 다른 파일에 의존할 때마다 webpack은 이것을 의존성으로 취급합니다. 이를 통해 webpack은 이미지 또는 웹 글꼴과 같은 코드가 아닌 assets을 사용할 수 있으며 애플리케이션에 대한 종속성으로도 제공할 수 있습니다.

webpack이 애플리케이션을 처리할 때 command line이나 파일에 정의된 모듈 목록에서 시작합니다. 이러한 entry points(진입점)에서 시작하여 webpack은 애플리케이션에 필요한 모든 모듈을 포함하는 dependency graph를 재귀적으로 빌드한 다음 모든 모듈을 브라우저에서 로드할 소수의 번들로 번들링합니다.

 

 

출처: https://webpack.js.org/concepts/

https://webpack.js.org/concepts/dependency-graph/