xx

Posted by negabaro kim on Sunday, February 3, 2019 Tags: xx   1 minute read

webpack이란

서로 연관되어 있는 웹자원들을 js,css,img와 같은 스태틱한 자원으로 변환해주는 모듈 번들러

webpack탄생&배경

1. 새로운 형태의 Web Task Manager

기존의 Web Task Manager(Gulp,Grunt)의 기능 + 모듈 의존성 관리

2. 자바스크립트 Code Based Modules관리

자바스크립트 모듈화의 필요성: AMD,CommonJS,ES6(Modules) 기존 모듈 로더들과의 차이점: 모듈 간의 관계를 청크(Chunk)단위로 나눠 필요할 때 로딩

자바스크립트 모듈화 문제란

<script src="app.js" />
<script src="app2.js" />
<script src="app3.js" />

상기 모듈 로딩 방식의 문제점: 전역변수 충돌, 스크립트 로딩 순서, 복잡도에 따른 관리상의 문제 이를 해결하기 위해 AMD,CommonJs 그리고 webpack이 등장

Webpack의 철학

  1. 모든 웹자원이 모듈형태로 로딩 가능
  2. 초기에 불필요한것을 로딩하지 않고 필요한것만 로딩해서 사용

Entry

1개 또는 2개 이상의 엔트리 포인트를 설정가능

Output

entry에서 설정하고 묶은 파일의 결과값 설정

Output Name Option

Loader

loader를 이용해서 다른 형태의 웹자원들(img,css등)을 js로 변환하여 로딩 loader에서 모듈 로딩 순서는 배열의 요소에 오른쪽에서 왼쪽으로 진행됨

test use

Plugin

플러그인은 파일별 커스텀 기능을 사용하기위해 사용 ex) JS minification, file extraction, alias(별칭)

loader vs plugin

webpack번들링을할떄 중간에 개입하는 loader

번들링이 끝나고 결과를 낼때 관여하는게 plugin

plugins: [
    new webpack.optimize.UglifyJsPlugin()
    //...
]

특정 조건에 맞춰 어떤 액션을 실행

mode

モード(webpack 4 から追加された項目)の設定。 モードは development、production、none が存在する。

development か production を指定すると、様々な設定が有効になって webpack が実行される。 例えば、production にすれば optimization.minimizer という設定が有効になり、圧縮されたファイルが出力される。

設定は上書き可能であり、上書きしたい項目は webpack.config.js に記述する(詳細は後述)。

entry

エントリーポイントの設定。複数設定することも可能。 エントリーポイントとはモジュール間の依存関係の解析を開始する地点のこと。 各モジュールを読み込んでメインの処理をする JavaScript ファイルだと認識しておけば良い。

output

出力の設定。 出力するファイル名や出力先のパスを指定する。 OS によってパスが異なることを防ぐために、出力先のパスの指定には path.join()を利用する。

https://qiita.com/soarflat/items/28bf799f7e0335b68186 https://www.inflearn.com/course/webpack-%EC%9B%B9%ED%8C%A9-%EA%B0%95%EC%A2%8C/webpack-%EC%9D%B45%EB%9E%80/ https://qiita.com/sakiyama0101/items/530630870bc9f16eeab6