웹팩의 기본 씪쓰 컨셉

https://webpack.js.org/concepts/ 참고여

처음에는 내가 한글로 쓰다가 존나 귀찮아서 구글 번역기에 넣었슴미다

Concepts

개념

webpack is a static module bundler for modern JavaScript applications.

웹팩은 정적 모듈 번들러이다 모던 자바스크립트 어플을 위한.

Since version 4.0.0, webpack does not require a configuration file to bundle your project, nevertheless it is incredibly configurable to better fit your needs.

4.0.0버전 이래로 웹팩은 설정 파일을 필요로 하지않는다 니놈 프로젝트 번들할라고

그럼에도 불구하고 웹팩은 존나게 configurable하다 니놈 요구사항 맞출라고

To get started you only need to understand its Core Concepts:

시작하기 위해서 닌 오직 웹팩의 코어 컨셉들만 이해하면 된다:

• Entry
• 삽입
• Output
• 배출
• Loaders
• 로더들
• Plugins
• 플러그인들
• Mode
• 모드
• Browser Compatibility
• 브라우져 호환성

Entry

삽입

$143.86

+ $15.00 Shipping

An entry point indicates which module webpack should use to begin building out its internal dependency graph. webpack will figure out which other modules and libraries that entry point depends on (directly and indirectly).

엔트리 포인트는 나타낸다 뭘 나타내냐면 모듈 웹팩이 내부 dependency graph를 만들기 위해 어떤 모듈 웹팩 사용할지. 웹팩은 파악할 것이다 뭘 파악하냐면 엔트리 포인트가 직접적으로 그리고 간접적으로 의존하는 다른 모듈과 라이브러리를.

Output

배출

The output property tells webpack where to emit the bundles it creates and how to name these files. It defaults to ./dist/main.js for the main output file and to the ./dist folder for any other generated file.

output 속성은 말한다 webpack에게. 생성 된 번들을 내보낼 위치 / 이 파일의 이름을 지정하는 방법. 기본은 메인 출력 파일의 경우 ./dist/main.js, 다른 생성 된 파일의 경우 ./dist 폴더이다.

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' // 우리 번들의 이름
  }
};

Loaders

로더들

Out of the box, webpack only understands JavaScript and JSON files. Loaders allow webpack to process other types of files and convert them into valid modules that can be consumed by your application and added to the dependency graph.

웹팩은 JavaScript와 JSON 파일만 이해합니다. 로더는 webpack이 다른 유형의 파일을 처리하고, 앱에서 사용할 수 있고 dependency graph에 추가 할 수 있는 유효한 모듈로 변환 할 수 있게 합니다.

At a high level, loaders have two properties in your webpack configuration:

1. The test property identifies which file or files should be transformed.
2. The use property indicates which loader should be used to do the transforming.

하이레베루에서 로더들은 두가지 속성을 갖는다 니놈 웹팩 설정에서.

test 속성은 알려준다 어떤 파일이 변형되는지

use 속성은 알려준다 어떤 로더가 변형을 위해 사용되는지

const path = require('path');

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

The configuration above has defined a rules property for a single module with two required properties: test and use. This tells webpack's compiler the following:

위의 설정은 test 및 use의 두 가지 필수 속성이있는 단일 모듈에 대한 rules 속성을 정의했습니다. 이것은 webpack의 컴파일러에게 다음과 같이 알려줍니다 :

"Hey webpack compiler, when you come across a path that resolves to a '.txt' file inside of a require()/import statement, use the raw-loader to transform it before you add it to the bundle."

웹팩 컴파일러년아, 니년이 txt확장자로 resolve되는 경로를 발견한다고 해봐 require()/import

문 내부에서 이년아, 그러면 그걸 변경할려면 raw-loader써라, 번들에 추가하기 전에

Plugins

플러그인들

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

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

In order to use a plugin, you need to require() it and add it to the plugins array. Most plugins are customizable through options. Since you can use a plugin multiple times in a config for different purposes, you need to create an instance of it by calling it with the new operator.

플러그인을 사용하려면 플러그인을 require ()하여 플러그인 배열에 추가해야합니다. 대부분의 플러그인은 옵션을 통해 사용자 정의 할 수 있습니다. 여러 목적으로 설정에서 플러그인을 여러 번 사용할 수 있으므로 new operator로 플러그인을 호출하여 인스턴스를 만들어야합니다.

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

Mode

모드

By setting the mode parameter to either development, production or none, you can enable webpack's built-in optimizations that correspond to each environment. The default value is production.

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

Browser Compatibility 

브라우저 호환성

webpack supports all browsers that are ES5-compliant (IE8 and below are not supported). webpack needs Promise for import() and require.ensure(). If you want to support older browsers, you will need to load a polyfill before using these expressions.

webpack은 ES5 호환 (IE8 이하는 지원되지 않음)되는 모든 브라우저를 지원합니다. webpack은 import () 및 require.ensure ()에 대한 Promise 기능(ES6 기능임)이 필요합니다. 구형 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 polyfill을 로드해야 합니다.