webpack ts react boilerplate

이 글은 Tistory에서 이전된 포스팅입니다. 원본은 여기에서 확인할 수 있습니다.

https://ryuhojin.tistory.com/19

[[ReactJS] React + TypeScript + Webpack5 초기 설정 (리액트 18 공식 대응 완료)

[2022-10-06 : 2차 업데이트] 보일러 플레이트의 프로젝트 구조변경 및 약간의 설정 변경이 있었습니다. 참고해주세요. 좀 더 나은 스타터킷을 배포하도록 노력하겠습니다. 오늘은 CRA를 사용하지 않

ryuhojin.tistory.com](https://ryuhojin.tistory.com/19)

위 글 작성자분의 webpack5 boilerplate 위에

//webpack.common.js
    new webpack.ProvidePlugin({
      React: "react",
      process: 'process/browser.js', //추가
    }),

process 못 찾는 에러 해결하기 위해 추가하고

//webpack.dev.js
const Dotenv = require('dotenv-webpack');
module.exports = merge(common, {
...
  plugins: [
    new Dotenv({ path: ".env" }), //추가
  ]
});

dev의 경우 .env를 잡게하고

const Dotenv = require('dotenv-webpack');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = merge(common, {
...
  plugins: [
    new MiniCssExtractPlugin(),
    new Dotenv({ path: ".env.production" }), //추가
    new CopyPlugin({ //추가
      patterns: [{ from: "public/static", to: "static" }],
    })
  ],
  ...
});

product의 경우 .env.production을 잡도록 설정하고

정적 source는 copy-webpack-plugin 설치하고 public/static 에서 dist/static 으로 폴더 복사하도록 추가