Skip to content

Kyunghwa Yoo

Webpack Plugins

— Webpack, javascript — 1 min read

plugin은 파일별 커스텀 기능을 사용하기 위해서 사용한다.

  • ex) JS magnification, file extraction, alias (별칭)
1module.exports = {
2    entry: {},
3    output: {},
4    module: {},
5    plugins: [
6        new webpack.optimize.UglifyJsPlugin()
7        // ...
8    ]
9};

loader와 plugin의 차이점

  • loader와 plugin 둘 다 추가적인 기능을 제공하는 것은 동일하다.
  • loader는 웹팩을 번들링하면서 중간에 개입하는것
  • plugin은 번들링이 다 끝나고 output을 낼 때 관여하는 것

Plugin 종류

ProvidePlugins

  • 모든 모듈에서 사용할 수 있도록 해당 모듈을 변수로 변환한다.
  • 라이브러리에 대한 전역변수로 선언해주는 플러그인
1new webpack.ProvidePlugin({
2    $: 'jquery'
3})

DefinePlugin

  • Webpack 번들링을 시작하는 시점에 사용 가능한 상수들을 정의한다.
  • 일반적으로 개발계 & 테스트계에 따라 다른 설정을 적용할 때 유용하다.
1new webpack.DefinePlugin({
2    PRODUCTION: JSON.stringify(true),
3    VERSION: JSON.stringify('5fa3b9'),
4    BROWSER_SUPPORTS_HTML5: true,
5    TWO: '1+1',
6    'typeof window': JSON.stringify('object')
7})

ManifestPlugin

  • 번들링시 생성되는 코드(라이브러리)에 대한 정보를 son 파일로 저장하여 관리
  • 모든 라이브러리에 대한 의존성 그래프등을 파악하기 쉬운 플러그인
1new ManifestPlugin({
2    fileName: 'manifest.json',
3    basePath: './dist/'
4})
© 2020 by Kyunghwa Yoo.