[TS] Webpack config

1. webpack5에서 file-loader를 구성하지 않아도 asset 파일 사용 가능

https://webpack.kr/guides/asset-modules/

• asset/resource는 별도의 파일을 내보내고 URL을 추출합니다. 이전에는 file-loader를 사용하여 처리할 수 있었습니다.
• asset/inline은 애셋의 data URI를 내보냅니다. 이전에는 url-loader를 사용하여 처리할 수 있었습니다.
• asset/source는 애셋의 소스 코드를 내보냅니다. 이전에는raw-loader를 사용하여 처리할 수 있었습니다.
• asset은 data URI와 별도의 파일 내보내기 중에서 자동으로 선택합니다. 이전에는 애셋 크기 제한이 있는 url-loader를 사용했습니다.

file-loader를 없애고 다음 코드로 바꾸었다.

asset이 4kb보다 크면 asset/resource로 바뀌어 별도의 파일로 빌드된다.

4kb보다 작으면 asset/inline으로 바뀌어 bundle.js 파일 안에 이미지 파일이 빌드된다.

우리가 현재 쓰는 이미지들은 1kb보다 작으므로 build해도 별도의 이미지 파일 안 생김.

{
        test: /\.(png|svg|jpe?g|gif|webp)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // 4kb
          },
        },
      },

2. dotenv 사용법 변경

dotenv가 없다면?

Uncaught ReferenceError: process is not defined

사용법

const dotenv = require('dotenv');

dotenv.config();

module.exports = {
	plugins: [
	    new webpack.DefinePlugin({
	      'process.env': JSON.stringify(process.env),
	    }),
	  ],
}

3. dotenv-webpack과 dotenv 환경 충돌

해결 →

webpack.config 파일에서는 dotenv 관련 설정을 하지 않는 것으로 바꿈.

// webpack.dev.js

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const { HotModuleReplacementPlugin } = require('webpack');
const common = require('./webpack.config.js');
const dotenv = require('dotenv');

module.exports = () => {
  dotenv.config({ path: './.env.development' });

  return merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    plugins: [
      new HotModuleReplacementPlugin(),
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env),
      }),
    ],
    module: {
      rules: [
        {
          test: /\.(jpe?g|png|gif)$/i,
          type: 'asset/inline',
        },
      ],
    },
  });
};

// webpack.prod.js

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
const dotenv = require('dotenv');

module.exports = () => {
  dotenv.config({ path: './.env.development' });

  return merge(common, {
    mode: 'production',
    devtool: 'hidden-source-map',
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(process.env),
      }),
    ],
  });
};

4. aws에 배포한 prod에서 환경 변수 찾지 못함

//wabpack.prod.js

const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
const Dotenv = require('dotenv-webpack');

module.exports = () => {
  return merge(common, {
    mode: 'production',
    devtool: 'hidden-source-map',
    plugins: [
      new Dotenv({
        path: './.env.production',
        systemvars: true,
      }),
    ],
  });
};

• 해결

현재 두가지 요소가 함께 적용되어있음.

그러나 cloudFront의 캐시 무효화 관련하여 하나씩 실험은 못 해본 상태

첫번째 요소 : ignoreStub : true → [공식문서의 옵션](https://www.npmjs.com/package/dotenv-webpack)

두번째 요소 : process 패키지 설치 후 browser환경에 node의 process 모듈 추가([관련 블로그](https://leo-xee.github.io/Error/react-webpack-process/), [스택오버플로우](https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-defined))

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.config.js');
const Dotenv = require('dotenv-webpack');

module.exports = () => {
  return merge(common, {
    mode: 'production',
    devtool: 'hidden-source-map',
    plugins: [
      new Dotenv({
        path: './.env.production',
        systemvars: true,
        safe: true,
        ignoreStub: true,
      }),
      new webpack.ProvidePlugin({
        process: 'process/browser.js',
      }),
    ],
  });
};

5. aws에서 배포 후 빈 화면만 나옴

배경색만 적용이 되고 아무 에러, 로드가 없음

→ 배경색만 적용되는 것은 css global로 인한 것이고, bundle.js 혹은 라우팅이 잘못 되고 있다고 추측함.

해결

github pages와 달리 aws로 배포할 때는 react-router의 baseName을 설정해 줄 필요가 없다. 해당 라인을 제거하였다.

{ basename: process.env.REACT_APP_BASE_URL },

# 문제상황

# 원인 분석

# 해결방안

[https://velog.io/@leehaeun0/CRA-환경에서-배포-시-.env-분기하기-feat.-env-cmd](https://velog.io/@leehaeun0/CRA-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-%EB%B0%B0%ED%8F%AC-%EC%8B%9C-.env-%EB%B6%84%EA%B8%B0%ED%95%98%EA%B8%B0-feat.-env-cmd)

나중에 webpack 최적화

  cache: {
    type: env.dev ? 'memory' : 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
    idleTimeout: 2000,
  },

만약 dotenv 패키지를 쓴다면?

const webpack = require('webpack');
const { merge } = require('webpack-merge');
const { HotModuleReplacementPlugin } = require('webpack');
const common = require('./webpack.config.js');
const Dotenv = require('dotenv-webpack');
// const dotenv = require('dotenv');

module.exports = () => {
  // dotenv.config({ path: './.env.development' });

  return merge(common, {
    mode: 'development',
    devtool: 'cheap-module-source-map',
    plugins: [
      new HotModuleReplacementPlugin(),
      new Dotenv({
        path: './.env.development',
      }),
      // new webpack.DefinePlugin({
      //   'process.env': JSON.stringify(process.env),
      // }),
    ],
    module: {
      rules: [
        {
          test: /\.(jpe?g|png|gif)$/i,
          type: 'asset/inline',
        },
      ],
    },
  });
};