내가하는 일은 많지만 역방향으로 도움이된다면

방법

webpack의 설정 파일을 개발판과 제품판으로 나눈다.

DefinePlugin으로 정의한 Global constant로 디버그 라이트의 코드를 살릴지 어떨지를 결정한다.

또한 사용한 webpack은 4.41.2입니다.

디버그 라이트 코드

예를 들면, develop.js등으로서, 이하와 같은 디버그 라이트의 코드를 기재해 둡니다.

export {debug_msg};

function debug_msg(msg) {
    if (DEBUG) {
        console.log(msg);
    } 
}

webpack 구성 파일

개발 버전의 코드와 정식 버전의 코드 빌드는 간단히 다음 명령으로 수행하기로 결정했습니다. 사용하는 설정 파일의 지정을 바꾸고 있을 뿐입니다.

（開発版）
.node_modules/.bin/webpack —-config webpack.dev.js

（製品版）
.node_modules/.bin/webpack —-config webpack.prod.js

설정 파일은 아래와 같이 기재합니다. 개발판과 제품판의 차이는 mode 와 DEBUG 가 true 인가 false 뿐입니다.

(개발판:webpack.dev.js)

var webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(true)
        })
    ]
}

(제품판:webpack.prod.js)

var webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    plugins: [
        new webpack.DefinePlugin({
            DEBUG: JSON.stringify(false)
        })
    ]
}

이제 develop.js의 DEBUG가 true 또는 false로 바뀝니다.
또한 minification은 불필요한 코드를 제거하므로 정식 버전의 debug_msg는 내용이 비어 있습니다 (같다).