웹팩의 기본값

1) 개발자 모드
2) 배포 모드
3) 아무것도 세팅되지 않은 모드

"production" 모드는 Webpack 모듈 번들링 과정에서 자체적으로 코드를
최적화하여 용량을 줄임

모드를 이용하는 첫번째 방법

보통 webpack.config.js와 webpack.config.prod.js 두 개의 파일을 만들어서
개발시에는 npx webpack으로 개발모드를 실행하고,
배포시에는 npx webpack --config webpack.config.js 로 배포모드를 실행한다.

webpack.config.js

const path = require('path');

module.exports = {
    mode:"development",
    entry:"./source/index.js",
    output:{
        path:path.resolve(__dirname, "public"),
        filename:'index_bundle.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'
    }
}

모드를 이용하는 두번째 방법

하나의 파일을 만들고 시스템의 환경변수 세팅에 따라 조건문을 이용해
적당한 모드로 스위칭되도록한다.

✨ 참고
1) https://webpack.js.org/configuration/mode/
2) https://yamoo9.gitbook.io/webpack/webpack/config-webpack-dev-environment/webpack-mode