[Node] Webpack 쓸만한 Plugins

 웹팩에서 쓸만한 플러그인을 정리해보았습니다. 웹팩을 사용하는 방법을 이해하고, config 파일을 수정하는 방법에 대한 이해가 필요합니다. 현 문서는 플러그인의 종류와 사용방법에만 알려드릴 뿐 웹팩에 사용법을 정의하지 않았습니다. 웹팩에 사용법은 다른 문서를 참고해주시기 바랍니다. 

 

 이 문서는 항시 업데이트 할 수 있음을 알려드립니다. 

 

 

# Contents

---

• 변수 정의 및 사용 - DefinePlugin
• 환경변수 정의 및 사용 - EnvironmentPlugin
• 최적화 - TerserPlugin

 

 

# 변수 정의 및 사용

---

 웹팩에서의 변수를 선언하여 선언된 변수를 의존된 자바스크립트 코드 에서 사용할 수 있습니다. 웹팩에서 제공하는 DefinePlugin 은 모든 자바스크립트 코드에서 접근 가능한 변수 를 선언하기 위한 코드입니다. 사용법은 아래와 같습니다.

 

 다음 코드를 webpack.config.js 에 추가하시기 바랍니다.

 

    plugins: [
        new webpack.DefinePlugin({
            APP_NAME: JSON.stringify("My app"),
            VERSION: JSON.stringify("v0.1"),
        }),
    ],

 

 다음 코드를 src/index.js 에 입력하시기 바랍니다. 

 

console.log(`APP_NAME:`, APP_NAME);
console.log(`VERSION:`, VERSION);

 

 결과 값은 아래와 같습니다.

 

 

 

 

# 환경변수 정의 및 사용

---

 process.env 에 저장되는 환경변수를 전역변수로 사용하기 위하여 사용하는 함수입니다. 웹팩에서 제공하는 EnvironmentPlugin 은 환경변수를 전역변수로 사용하기 위하여 사용하는 함수 코드입니다. 사용법은 아래와 같습니다.

 

 다음 코드를 webpack.config.js 에 추가하시기 바랍니다.

 

    plugins: [
        new webpack.EnvironmentPlugin({ DEBUG: "on" }),
    ],

 

 다음 코드를 src/index.js 에 입력하시기 바랍니다. 

 

if (process.env.DEBUG === "on") {
    console.log(`DEBUG Mode`);
}

 

 

# 최적화

---

 Terser 를 사용하여 소스를 최적화 합니다. 시작하려면 terser-webpack-plugin 을 설치해야 합니다.

 

 다음 terser-webpack-plugin 을 설치합니다.

 

npm install terser-webpack-plugin --save-dev

 

 다음 코드를 webpack.config.js 에 추가하시기 바랍니다. 

 

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    mode: "development",

    optimization: {
        minimize: true,
        minimizer: [new TerserPlugin()],
    },
};

 

 

 모드는 development, test, production 가 있다고 합니다.  development 는 기본 모드이며, production 모드는 console.log 가 전부 사라집니다. 주의해주세요..