Webpack의 모드

 

DogPawDev/webpack-example

해당 포스트의 코드입니다.

---

웹팩에는 모드가 존재합니다

 

Npx webpack 명령어를 실행해보면 다음과 같은 경고가 나옵니다

모드 설정 안해? 의 경고

Mode | webpack

다음 사이트에서 여러 모드들이 존재하는 것을 확인할 수 있습니다.

 

 

3가지의 모드

기본적으로 아무것도 설정하지 않으면 production 모드로 실행됩니다.

 

각 모드에 따른 명령어들

기본값인 production 모드로 npx webpack 명령어를 실행할 경우

index_bundle.js

Index_bundle.js 파일이 알아보기 힘들게 나와있었습니다. 배포를 하기위해 최대한 용량을 줄이기 위해 다음과 같이 변동 되는 것입니다.

 

 

모드를 변경하기 위해서는 webpack 설정 파일에서 바꿔주면 됩니다.

 

웹팩 설정 파일에서 다음 부분을 추가하면 됩니다.

해당부분을   작성하지 않아서 경고가   나왔던 것

이제 경고가 나타나지 않습니다.

개발 모드로 만들어진

Index_bundle.js을확인해보면 그나마 알아볼 수 있게 됩니다.

해당 모드에서 튜닝을 하면 되는 것 같습니다?

이런 모드들이 있기 때문에 개발할 때와 배포를 할 때 각각 다른 모드를 설정해놓은 파일을 미리 만들어서 사용하면 조금 더 편하게 쓸 수 있습니다.

 

해당 부분을 수정해 두고 사용하면 됩니다.

 

Npx webpack - 개발모드

Npx webpack --config webpack.config.pord.js

 

아니면 1개의 환경설정 파일을 만들고 환경변수를 받도록 설정을 하고 조건문을 통해 다른 버전으로 실행하도록 할 수 있습니다.