[ Node.js / Webpack ] 개발 환경

[ Node.js / Webpack ] 이번엔 웹팩 🤜

[ Node.js / Webpack ] 자산 관리 ( css, image, font, file, loader )

[ Node.js / Webpack ] 출력 관리

 

이번 챕터 - https://webpack.js.org/guides/development/

 

오 나름 꾸준히 잘 하구 있다 :)

이번 챕터의 장은 Development 개발이라고 제목지어져 있다.

포스팅하면서 읽어 내려가겠지만 대충 훑어보니 개발환경에 관한 

webpack의 기능을 설명해주려 하는가보다.

 

 

 

 

mode

3편의 출력관리의 코드들을 가지고 이어서 해볼 것이다.

그리고 문서에서 대뜸 webpack 모드를 development 모드로 설정하라고 한다.

문서를 찾아 보니 webpack에서는 빌드 옵션으로

"none, production(Default), development" 모드가 있다.

production모드는 최적화하여 빌드,

development모드는 빠르게 빌드 ( 설정하는 방법이 있는듯 하다 ),

none모드는 특별한 기능없이 빌드한다.

참조 문서 - https://webpack.js.org/configuration/mode/

 

 

👉 webpack.config.js

module.exports = {
  mode: 'development'
};

 

---

 

Using source map

웹팩에서 리소스들을 번들로 제공받을때 오류가 발생한다면
우린 어디에서 오류가 났는지 정확한 위치를 찾기 어려울 수 있다.
한가지 예로, javascript a, b, c를 bundle.js로 묶었는데 오류가 발생했다면
우리는 해당 오류가 a, b, c 중 어디서 발생한지 찾기 어렵다는 것이다.

이러한 문제를 source map이라는 친구가 도와줄 것이다.

source map에는 다양한 옵션들이 있으니 참고해서 사용하자 :)

 

문서에서는 사이트맵이 번들에 dataUrl로 추가되는 inline-source-map을 사용한다.

 

👉 webpack.config.js

 module.exports = {
    devtool: 'inline-source-map'
}

 

그리고 테스트를 위해 print.js에 오타를 하나 낸 후 빌드해봤다.

export default function printMe() {
    cosnole.log('I get called from print.js!');
}

오류가 print.js에서 난 것을 확인 할 수 있다.

 

 

---

 

Choosing development tool

우리는 여태 수동으로 웹팩의 빌드를 해주었는데

이번엔 자동 컴파일 옵션에 관해 살펴보려 한다 :)

1. webpack's Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

 

1. webpack's Watch Mode

 : 하나의 파일이 업데이트 될때 마다 자동으로 모두 빌드 한다.

 

package.json

"scripts": {
     "watch": "webpack --watch",
},

 

watch mode를 해놓고 npm run watch 명령어로 파일들의 변경

사항들을 볼 수 있도록 해놨다.

그리고 print.js의 오류를 고쳐준다면 빌드가 되는 모습을 볼 수 있다.

수동으로 빌드 하는거에서 한단계 편해졌지만 watch mode의 단점은

새로고침을 해주어야 한다는 것이다.

 

 

2. webpack-dev-server

watch mode을 단점을 보안하기 위해 우린 -dev-server을 사용하려 한다 :)

예전에 sass개발 환경을 만들때 라이브 모드라는 기능을 제공 해주었는데

이친구도 실시간으로 바로바로 적용되어 보여도록 해준다.

 

npm install --save-dev webpack-dev-server

설치 후  dev-server가 파일을 찾을 위치를 설정 해주자.

 

webpack.config.js

devServer: {
    contentBase: './dist',
},

그리고 조금 더 편하게 dev-server을 실행 하기 위해 start명령어를 등록 해주었다.

 

package.json

"scripts": {
    "start": "webpack-dev-server --open",
},

등록해주었으니 npm run start 명령으로 dev-server을 실행해준 뒤

localhost:8080으로 접속해보면 라이브모드가 활성화 된 것을 볼 수있다 :)

 

 

3. webpack-dev-middleware

음... middleware친구는 로컬에서만 테스트 했었던 dev-server와 달리

웹팩에서 처리한 파일을 서버에 내보내는 기능을 제공한다.

해당 기능은 추후에 사용할 때 재업로드 하려고 한다 😳