Webpack

= static module bundler for Javascript.
= 웹팩은 자바스크립트를 위한 모듈 번들러로 하나의 어플리케이션을 처리할 때 웹팩 내부적으로 dependency graph를 만들고 이것을 통해 어플리케이션, 혹은 프로젝트에 필요한 모듈들을 하나 혹은 여러개의 번들로 만들어준다.

Bundle

= 어플리케이션 구동에 필요한 모듈들을 모아놓은 패키지
= 각 모듈들의 서로 간의 관계나 의존성에 따라 하나 혹은 여러개의 번들로 모아질 수 있다.

웹팩은 모듈 번들러 중 우수한 성능을 가지고 있기 때문에 많이 쓰이고 있다.

웹팩의 구성

1. Entry
   = dependency graph를 만들기 위한 input source

2. Output
   = Webpack의 처리 결과물의 위치

3. Loader
   = 웹팩은 javascript와 json 타입의 파일들만 처리할 수 있는데 Loader는 이 외 타입들을 웹팩이 처리할 수 있는 형태로 변환시켜준다.

4. Plugins
   = Loader가 변환하는 동안 Plugin은 bundle optimization, asset management and injection of environment과 같은 일을 진행할 수 있습니다.

5. Mode
   = 다양한 Profile로 지정하여 진행 가능 (devlopment, production, none)
   = 기본 production.

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

6. 호환성
   = IE8 이하의 IE를 제외하고 ES5를 사용하는 모든 브라우저에서 호환된다.

7. 형태

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