webpack

concepts

webpack 의 핵심 은 최신 자바 스크립트 애플리케이션을위한 정적 모듈 번 들러 입니다.
webpack은 애플리케이션을 처리 할 때 내부적으로 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성 하는 종속성 그래프를 작성합니다 .

버전 4.0.0부터, webpack은 프로젝트를 묶기 위한 설정 파일 을 필요로하지 않지만 , 당신의 필요에 더 잘 맞도록 구성 할 수 있습니다.

시작하려면 핵심 개념 만 이해하면됩니다.

Entry
Output
Loaders
Plugins
Mode
Browser Compatibility

이 문서는 이러한 개념에 대한 높은 수준의 개요를 제공하고 구체적인 개념 별 유스 케이스에 대한 링크를 제공하기위한 것입니다.

Entry

엔트리 포인트 모듈 웹팩가 내부 구축 시작 사용해야하는 나타낸다 종속성 그래프 . webpack은 진입 점이 (직접적으로 그리고 간접적으로) 의존하는 다른 모듈과 라이브러리를 파악할 것입니다.

기본적 으로이 값 은 true이지만 webpack 구성./src/index.js 의 entry 속성 을 구성하여 다른 (또는 여러 개의 진입 점)을 지정할 수 있습니다 . 예 :

webpack.config.js


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

Output

출력 속성은 어디 방출하는 웹팩 알려줍니다 번들 이 생성을하는 방법과 이러한 파일의 이름을 지정합니다. ./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.filenameand output.path속성을 사용하여 webpack에 번들의 이름과 발급 할 위치를 지정합니다.
상단에 가져 오는 경로 모듈에 대해 궁금한 점이 있다면 파일 경로를 조작하는 데 사용되는 핵심 Node.js 모듈 입니다.

Loaders

웹팩은 자바 스크립트와 JSON 파일 만 이해합니다.
로더를 사용하면 webpack이 다른 유형의 파일을 처리 하여 응용 프로그램에서 사용하고 종속성 그래프에 추가 할 수있는 유효한 모듈 로 변환 할 수 있습니다.

1
2
3

할 수있는 능력 참고 import모듈, 예를 들어, 모든 종류의 .css파일, 웹팩에 고유 한 기능이며 다른 bundlers 또는 작업 주자에 의해 지원되지 않을 수 있습니다. 
우리는 개발자가보다 정확한 의존성 그래프를 작성할 수 있기 때문에이 언어 확장이 보증된다고 생각합니다.

높은 수준에서 로더 는 웹팩 구성에 두 가지 속성을가집니다.

test속성을 변환해야하는 파일이나 파일을 식별합니다.
이 useproperty는, 변환을 실시하기 위해서 어느 로더를 사용해야 할까를 나타냅니다

webpack.config.js


const path = require('path');

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

구성은 위에서 정의한 rules두 필수 특성 단일 모듈 속성 : test및 use. 이것은 webpack의 컴파일러에게 다음과 같이 알려줍니다 :

“당신이 내부에 ‘.txt로’파일로 확인되는 경로를 통해 올 때 헤이 웹팩 컴파일러는 require()/ import문, 사용 (가) raw-loader당신이 번들에 추가하기 전에 변환 할 수 있습니다.”

Plugins

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

플러그인 인터페이스 와이 인터페이스 를 사용하여 웹팩 기능을 확장하는 방법을 확인하십시오.

플러그인을 사용하려면 플러그인에 플러그인을 require()추가해야합니다 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각 환경에 대응 웹팩에 내장 된 최적화를 활성화 할 수 있습니다. 기본값은 production입니다.


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

브라우저 호환성(Browser Compatibility)

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

참조

webpack