Std. 3

Std. 2에서 webpack의 설치와 기본동작에 대해 확인했습니다. 

Std. 3부터 webpack에 대해 자세히 확인하겠습니다.

 

*** WEBPACK ***

모듈번들링도구

아래와 같은 역할들을 수행합니다. 

 

css

1.1 - 하나의 파일로 Export

1.2 - 압축

1.3 - 사용하지 않는 css 제외 ???

js

2.1 - 하나의 파일로 Export

2.2 - 압축

2.3 - 암호화

2.4 - ES6 -> ES5

2.5 - Plugin 관리

 

3.1 dev, real 버전관리

4.1 webpack dev-server 사용

 

---

위의 내용을 하나씩 추가해보겠습니다. 

 

1.1 css Export 

 

JS 와 동일하게 entry 파일이 필요합니다. 

entry 파일이 있으면 output 파일이 있어야 됩니다. 

이때 ExtractTextPlugin, css-loader을 사용합니다.

 

package.json

webpack.config.js

 

---

Git.

https://github.com/imse0109/fetest/commit/5bcbb83399d967b653ca3d05e4ee6b43d1aea559

 

---

1.2 - 압축

2.2 - 압축

2.3 - 암호화

3.1 dev, real 버전관리

 

압축과 암호화를 하면서 dev, real 버전을 따로 제작하겠습니다.

압축과 암호화를 위해서는 , UglifyJsPlugin,OptimizeCssAssetsPlugin을 사용합니다. 

 

dev 버전에서는 압축과 암호화가 필요없어보입니다. 

오류를 확인하기 위해서는 원래의 소스를 확인하는것이 쉬워보입니다.

webpack 설정을 별도의 파일로 구분짓기 위해서 webpack 파일을 따로 관리합니다. 

 

real 버전

build/webpack.prod.conf.js

package.json

Terminal

버전충돌의 이슈가 있습니다. 

real 버전 빌드시에는 npm run build 실행

 

결과

 

---

Git.

https://github.com/imse0109/fetest/commit/947332e82a55980b740cb5ce1a82b53c918523fe