Webpack 5로 반응

2021년 7월 현재 create-react-app Webpack 4를 사용합니다 . 불행히도, 그것은 우리가 Webpack 5를 실험하기 위해 의존성을 설치하고 빌드 프로세스를 스스로 구성해야 한다는 것을 의미합니다. 이것은 create-react-appWebpack 5로 생성된 프로젝트를 마이그레이션하기 위한 빠른 가이드 입니다.

1. 새 프로젝트 생성/기존 프로젝트 사용

npx create-react-app reactw5

create-react-app프로젝트를 초기화하는 데 사용한 경우 번들링, 트랜스필 및 기타 최적화를 즉시 처리합니다. 그러나 이 설정은 Webpack 4를 사용하고 Webpack 5에서는 아무 소용이 없습니다. 다른 도구와 함께 Webpack 5를 설치하고 구성해야 합니다.

웹팩 종속성

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin serve

yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react

yarn add -D css-loader style-loader @svgr/webpack style-loader url-loader

3. webpack.config.js루트 수준에서 파일을 생성 합니다.

이제 Webpack 5가 있으므로 작동하려면 사용자 지정 구성이 필요합니다.

*** 이것은 생산 준비 구성이 결코 아닙니다. 필요에 따라 typescript, CSS 전/후 프로세서 및 기타 최적화를 처리해야 할 수도 있습니다. 하지만 시작하기에 충분하기를 바랍니다 ***

4. babel.config.json루트 수준에서 파일을 생성 합니다.

React에 도움이 되도록 많은 babel 플러그인을 설치했습니다. 구성해 보겠습니다.

5. 마지막으로 package.json파일을 업데이트 합니다.

이제 Webpack과 Babel을 구성했으므로 NPM 스크립트를 교체해야 합니다.

다음으로 응용 프로그램을 시작할 수 있어야 합니다. yarn start

이제 React 앱에서 webpack 5를 사용합니다. 건배!