한윤석 개발 블로그

배운 것을 적는 블로그입니다.

Webpack 기본개념

등록일: 2019-02-05
수정일: 2019-02-05
  • 웹팩은 자바스크립트 어플리케이션을 위한 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

  • 웹팩은 JavaScriptJSON파일들만 이해할 수 있습니다.
  • 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/


자바스크립트로 직접 만들면서 배우는 - 자료구조와 알고리즘 강의 바로 가기
실습으로 마스터하는 OAuth 2.0: 기본부터 보안 위험까지 - OAuth 2.0 강의 바로 가기
기계인간 이종립, 소프트웨어 개발의 지혜 - Git 강의 바로 가기

코드숨에서 매주 스터디를 진행하고 있습니다. 메일을 등록하시면 새로운 스터디가 시작될 때 알려드릴게요!