windows10 NODE_ENV 설정 질문입니다.

Question

webpack.config.js의 mode는'production'으로 설정해놓은 상태이구요, vscode terminal에서 NODE_ENV=development npm run build명령어는 에러가 나서 ( + NODE_ENV=development npm run build + ~~~~~~~~~~~~~~~~~~~~   + CategoryInfo     : ObjectNotFound: (NODE_ENV=development:String) [], CommandNotFoundException   + FullyQualifiedErrorId : CommandNotFoundException ) $env:NODE_ENV='development'로 먼저 설정해주고 그 다음에 npm run build를 해주었습니다. 그 결과, 브라우저 타이틀은 (개발용)이 붙어 나왔는데 console에는 production이 찍혔습니다. 여기에서 제가 궁금한 점은, console에 찍는process.env.NODE_ENV과 webpack.config.js의 templateParameters에서 사용하는 process.env.NODE_ENV의 변수명이 같은데 왜 다른 결과가 나오는 것인가 하는 것입니다. 저의 예상으로는 $env:NODE_ENV='development'을 해주었을때 webpack.config.js의 mode가 변경되고 그 값이 내부적으로 사용될 것이라고 생각했는데요, 결과적으로 보면 app.js에서는 mode를 사용하고, webpack.config.js에서는 독자적인 환경변수(?)를 사용하는 것인가요?? 그래도process.env.NODE_ENV 라는 변수명을 똑같이 쓰고 있다는 점이 이해가 안갑니다. 그리고 윈도우에서 설정이 안되서 제가 검색해서 $env:~로 설정해서 처음 의도와는 다르게 설정이 된 것인가요? 처음 공부하다보니 이래저래 헷갈리는게 많네요 ^^;

Answer

잘 설명해 주셔서 질문을 이해한 것 같습니다.

DefinePlugin에 의해 어플리케이션에 주입되는 process.env.NODE_ENV 값은 웹팩의 mode 값을 따라 갑니다.

반면 웹팩이 실행되는 시점에서는 process.env.NODE_ENV 값은 상황에 따라 다르구요. 다른 말로 하면 웹팩의 mode값과는 무관합니다.

저도 이게 헷갈려서 mode 값에 process.env.NODE_ENV 값을 넣어버리는 방법을 사용합니다.

Answer

object선언하는 단계에서 mode가 먹히지(?) 않는것같아 아래와 같이 바꾸니 의도대로 동작합니다.

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CustomPlugin = require('./my-webpack-plugin');
const MyWebpackPlugin = require('./my-webpack-plugin');
const apiMocker = require("connect-api-mocker");
module.exports = (env, options) => {
  const mode = options.mode || 'development';
  const config = {
    mode,
    entry: {
      main: './src/app.js'
    },
    output: {
      path: path.resolve('./dist'),
      filename: '[name].js'
    },
    devServer: {
      overlay: true,
      stats: 'errors-only',
      before: app => {
        app.use(apiMocker("/api","mocks/api"));
      },
      hot: true
    },
    module: {
      rules: [
        {
          test: /\.(png|jpg|gif|svg)$/,
          loader: 'url-loader',
          options: {
            name: '[name].[ext]?[hash]',
            limit: 20000, //20kb
          }
        }
      ]
    },
    plugins: [
      new MyWebpackPlugin,
      new webpack.BannerPlugin({
        banner: `
          Build Date: ${new Date().toLocaleString()}
        `
      }),
      new webpack.DefinePlugin({
        TWO: JSON.stringify('1+1'),
        'api.domain': JSON.stringify('http://dev.api.domain.com')
      }),
      new CleanWebpackPlugin({})
    ]
  }
  const css_loader = {
    test: /\.css$/,
    use: [
      config.mode === 'production'
      ? MiniCssExtractPlugin.loader 
      : 'style-loader',
      'css-loader'
    ]
  }
  config.module.rules.push(css_loader);

  const html_webpack_plugin = new HtmlWebpackPlugin({
    template: './src/index.html',
    templateParameters: {
      env: config.mode === 'development' ? '(개발용)' : ''
    },
    minify: config.mode === 'production' ? {
      collapseWhitespace: true,
      removeComments: true
    } : false
  });
  config.plugins.push(html_webpack_plugin);

  if(config.mode == 'production') {
   config.plugins.push(new MiniCssExtractPlugin({filename: '[name].css'}));
  }
  return config;
}

Answer

DefinePlugin덕분에 app.js에서 webpack.config.js의 mode가 production인걸 알 수 있는데요, 그 때 콘솔에 찍은 변수가 process.env.NODE_ENV였습니다. 따라서 제 머릿속에서 process.env.NODE_ENV는 webpack의 mode라고 인식이 되었습니다. 그런데 밑에 htmlwebpackplugin에서 templateParameters에 env정의할때 사용한 process.env.NODE_ENV는 npm run build시에 따로 설정한 값에 의해서만 결정되더라구요. 맥과 윈도우의 차이일지는 모르겠지만. 단순하게 NODE_ENV=development라는 명령어도 안먹히고 저는 $env:NODE_ENV="development"라는 명령어를 사용해서 설정해주었구요. 이 경우에 app.js에서는 webpack의 모드인 production이라고 뜨고(이건 아마 디파인플러그인의 영향이겠죠?), 웹브라우져 타이틀은 Document(개발용)이라고 나옵니다. 따라서 제 질문은 app.js에서의 process.env.NODE_ENV와, webpack.config.js에서 htmlwebpakplugind의 templateParameters에 env정의에 사용한 process.env.NODE_ENV는 서로 다른 값을 지칭하느냐 하는 것입니다. :)

+애초에 왜 터미널로 NODE_ENV를 설정하는지가 의문입니다. defineplugin으로 app.js에 process.env.NODE_ENV는 mode이니까 mode를 바꿔주면서 확인은 안되는 것인가요?(직접 해보니까 안되는 것이더라구요. 그런데 잘 이해가 안갑니다...)

Answer

설명해 주신 상황이 좀 헷갈려서 다시 질문을 드리겠습니다.

두 상황에서 NODE_ENV 값이 다르다고 하신것 같은데요. 각 각 설정한 부분과 사용한 부분을 알 수 있을까요?

특별한 까치

windows10 NODE_ENV 설정 질문입니다.

이 글과 비슷한 Q&A

배포 관련 질문

[배포하기] webpack에 aws 퍼블릭 IPv4 주소 와 포트 주소를 작성하고 나서 빌드후 실행하면 오류가 발생합니다.

users 호출 시 쿠키가 담기지 않는 이슈 질문드립니다.

CORS 에러 질문입니다.