Реагировать с Webpack 5

По состоянию на июль 2021 года create-react-app использует Webpack 4 . К сожалению, это означает, что мы должны сами устанавливать зависимости и настраивать процесс сборки, чтобы экспериментировать с Webpack 5. Это краткое руководство по переносу проектов, созданных с помощью, create-react-appв Webpack 5.

1. Создать новый проект / использовать существующий

npx create-react-app reactw5

Если вы использовали create-react-appдля инициализации проекта, он выполняет для вас объединение, транспилиляцию и другие оптимизации из коробки. Но эта установка использует Webpack 4 и нам не нужна с Webpack 5. Нам нужно установить Webpack 5 вместе с другими инструментами и настроить их.

Зависимости от Webpack

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, нам нужна специальная конфигурация, чтобы он работал.

*** Это ни в коем случае не готовая к производству конфигурация. Вам может потребоваться обработка машинописного текста, предварительных / пост-процессоров CSS и других оптимизаций в зависимости от ваших потребностей. Но, надеюсь, хватит, чтобы вы начали ***

4. Создайте babel.config.jsonфайл на корневом уровне.

Мы установили несколько плагинов babel, чтобы помочь нам с React. Настроим их.

5. Наконец, обновите package.jsonфайл.

Теперь, когда мы настроили Webpack и Babel, нам нужно заменить наши сценарии NPM.

Вы должны иметь возможность запустить приложение с помощью yarn start

Ваше приложение React теперь использует webpack 5. Ура!