[JS] Webpack 4 setting 'mode' option

Webpack 4 'mode' 옵션 세팅하기

Webpack4로 버전이 업데이트 되었고, 이번 웹팩4에서는 Production 모드와 Developement 모드를 소개했습니다.

웹팩4에서는 production 모드와 development 모드 둘 중 하나를 선택해야 합니다.

(이것을 설정하지 않으면 저같은 경우는 초기 프로젝트 단계임에도 불구하고 번들링 시간이 무려 8초 씩이나 나왔었습니다)

Production mode : webpack dev server 나 기타 등등 개발을 위한 구성파일을 정의합니다.

Development mode : UglifyJSPlugin , 소스맵등의 생산을 위한 구성파일을 정의합니다.

모드를 선택하지 않고 실행을 하게 되면,

Warning in Configuration

The ‘mode’ option has not been set. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for this environment.

와 같은 경고 문구가 뜨게 됩니다.

해결방법 1. Webpack.config.js scripts 부분에 추가하기

이렇게 --mode development, --mode production 을 붙여줍니다.

 이 방법이 만약 안된다면?

해결방법 2. Webpack.config.js 에 mode 추가 하기

mode : development (production)를 추가하면 됩니다.

이렇게 하면 Warning이 사라지게 됩니다!