Webpack 기본개념

• 웹팩은 자바스크립트 어플리케이션을 위한 staic module bundler입니다.
• 웹팩이 어플리케이션을 처리할 때 내부적으로 dependency graph를 그립니다.
• dependeny graph는 프로젝트에서 필요한 모듈을 하나 혹은 여러개의 번들로 만드는데 사용됩니다.

Entry

• entry point는 웹팩이 dependency graph를 그릴 때 시작점을 가리킵니다.
• 웹팩은 다른 모듈들이나 라이브러리들을 entry point가 의존하고 있는 것들을 찾습니다.
• 기본값은 ./src/index.js입니다. 하지만 다음과 같이 설정할 수 있습니다.

webpack.config.js

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

Output

• output은 웹팩이 만드는 번들을 어디에 만들고 이름을 무엇으로 할 것인지 정합니다.
• 기본값은 ./dist/main.js이고 ./dist폴더가 기본 폴더가 됩니다. 하지만 다음과 같이 설정할 수 있습니다.

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

Loaders

• 웹팩은 JavaScript와 JSON파일들만 이해할 수 있습니다.
• Loader는 웹팩이 다른 타입의 파일들을 처리할 수 있게 해주고, 그 파일들을 변형하는 역할을 합니다.
• loader는 두개의 속성을 가지고 있습니다.
  • test는 어떤 파일을 대상으로 할 것인지 선택합니다.
  • 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' }
    ]
  }
};

Plugins

• 로더는 특정 유형의 모듈을 변환하는 데 사용되지만 플러그인을 사용하면 번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행 할 수 있습니다.
• 플러그인을 사용하기 위해서 require()로 import하고 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'})
  ]
};

Mode

• mode값을 변경함으로써 개발물과 실제 배표용코드를 만들 수 있습니다.
• 기본값은 production입니다.

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

Browser Compatibility

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

Source

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