Skip to main content

핵심개념

Webpack 공식사이트를 참고하였습니다.

  • 웹팩은 자바스크립트 어플리케이션들을 위한 정적 모듈 번들러입니다.

  • 웹팩은 어플리케이션들을 처리할 때, 프로젝트에 필요한 모든 모듈에 관해서 매핑된 dependecy graph 를 내부적으로 빌드합니다. 그리고 번들(들)을 생성하게 됩니다.

  • 4.0.0 버전 이후로는 configuration file을 요구하지 않습니다. 하지만 최적화 등을 위하여 사용될 수는 있습니다.

간략히#

  • 6가지 핵심개념
    • 엔트리(Entry)
    • 아웃풋(Output)
    • 로더(Loaders)
    • 플러그인(Plugins)
    • 모드(Mode)
    • 브라우저 호환성(Browser Compatibility)

각각에 대한 자세한 내용은 webpack configuration plugin interface 들을 참조하세요.

엔트리(Entry)#

  • 빌드할 dependency graph의 시작점(모듈)입니다.
  • 웹팩이 의존관계에 있는 다른 모듈들을 찾아냅니다.
  • 디폴트는 .src/index.js로 되어있습니다.
  • 물론 configuration에서 여러 개의 엔트리포인트를 지정하거나 할 수 있습니다.
//예시 코드
module.exports = {
entry: './path/to/my/entry/file.js',
};

아웃풋(Output)#

  • 번들의 이름이나 생성될 위치를 지정해줄 수 있습니다.
  • 디폴트는 ./dist/main.js 가 메인, ./dist 가 메인이 아닌 다른 생성된 파일입니다.
const path = require('path'); // from Node.js module
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
};

로더(Loader)#

  • 기본적으로 웹팩은 javascript랑 json 파일들 밖에 인식하지 못합니다.
  • 따라서 로더가 다른 타입의 파일들을 인식하게끔 역할을 해줍니다. (ex) typescript, css...
  • test는 어떠한 파일이 변환되어야하는가
  • use는 변환에 어느 로더가 사용될 것인가
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};

플러그인(Plugin)#

  • 번들최적화, 어셋 관리, 환경변수 삽입같은 일을 합니다.
  • require() 후에 plugins 배열에 추가해야합니다.
  • new 연산자로 config 안에서 여러 번 사용할 수 있게 해줍니다.
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)#

  • development, production, none 중에 설정할 수 있습니다.
  • 디폴트는 production 입니다.
module.exports = {
mode: 'production',
};

브라우저 호환성#

  • ES5 이상 지원 (IE8 이하 미지원)
  • import(), require.ensure()에 대한 Promise 필요.