Webpack 5회차 - 모드의 도입

https://youtu.be/yO_nc7A2qpo

웹팩의 운영 모드

웹팩을 실행하면 WARNING in configration~ 경고문구가 터미널에 출력된다.

웹팩은 굉장히 많은 설정을 갖고 있고 다 기억하기 쉽지 않기 때문에 기본 설정값을 갖고 있다.

기본 설정값에는 개발자 모드(development), 실제 제품으로 배포 되는 모드(production), 아무것도 설정되지 않은 모드(none)가 있다.

터미널의 경고문구에 있는 주소 ( https://webpack.js.org/configuration/mode/)로 이동하면 모드에 대한 설명을 볼 수 있고 아래 사진과 같이 각 모드별 생략된 설정된 옵션들을 볼 수 있다. (아래 사진은 개발자 모드에 생략된 옵션의 사진이다)

따라서 개발을 하기 위한 것인지 서비스를 하기 위한 것인지에 따라 모드를 다르게 설정할 필요가 있다.

모드 설정

webpack.config.js에서 mode를 설정할 수 있다.

const path = require('path'); 

module.exports = {
    mode:"development", //개발자모드로 설정
    entry: "./source/index.js", 
    output: {
        path:path.resolve(__dirname, "public"),
        filename: 'index_bundle.js' 
    }  
}

모드를 추가하고 웹팩을 실행시키면 터미널에서 더이상 WARNING이 출력되지 않고 번들링 된 파일인 index_bundle.js 의 코드도 변경된 것을 볼 수 있다.

---

다른 모드 생성

개발을 할 때와 배포를 할 때는 모드가 다를 수밖에 없다.
개발자 모드로 설정된 web.config.js는 그대로 두고 webpack.config.prod.js 파일을 새로 생성한다.

const path = require('path'); 

module.exports = {
    mode:"production", //배포 모드로 설정
    entry: "./source/index.js", 
    output: {
        path:path.resolve(__dirname, "public"),
        filename: 'index_bundle.js' 
    }  
}

그냥 웹팩을 실행하면 개발자 모드로 실행이 된다.
위에서 생성한 다른 모드로 웹팩을 실행하려면 npx webpack --config wepack.config.prod.js(새로만든 파일명) 명령어를 입력하면 된다. index_bundle.js 파일을 확인하면 또 다른 형태로 번들링 된 것을 확인할 수 있다.

또는 하나의 webpack.config.js 파일을 생성해서 조건문 등을 이용하여 시스템의 환경변수를 어떻게 생성했냐에 따라 적당한 모드로 스위칭 되게 설정할 수도 있다.