Как настроить webpack для работы с react

Asyncee

NOTE: Друзья, обратите внимание, что с момента публикации прошло больше года, за это время в мире фронтенд разработки произошло большое количество изменений, поэтому данная статья потеряла свою актуальность.

В этой статье я опишу как настроить webpack с поддержкой замечательного фреймворка react для определения структуры интерфейса и sass для его стилизации.

На самом деле эти технологии можно использовать и без webpack, например, встраивать напрямую в код веб-страницы, но с бандлером это делать не только удобнее, но и решение получается более производительным.

Сразу оговорюсь, что я всё-таки больше backend developer, поэтому статья может содержать неточности, однако весь мой опыт изложенный ниже был неоднократно подтверждён на практике.

Установка

Для работы конфига необходимы следующие библиотеки:

Сам webpack. Устанавливать его следует глобально — в систему и локально — в проект. Глобальная установка даст возможность использовать команду webpack , а локальная — использовать его как библиотеку.

Прежде всего, babel с набором плагинов, объединённых в пресеты, внедряющих поддержку стандарта ES2015, react−а с его JSX и разных фич ES6/7.

Загрузчики, реализующие поддержку файлов со стилями и плагин для сохранения извлечённых стилей в отдельный файл.

И оставшиеся react и scss-версия bootstrap.

Структура проекта

Привожу структуру проекта, в данном случае — для простого одностраничного приложения. Структура вашего проекта может разительно отличаться, но для целей демонстрации она подходит очень хорошо.

Настройка

Сначала конфиг — потом пояснения.

Исходных файлов два — static/app.js и static/main.scss . После запуска команды webpack произойдёт загрузка данных из них с помощью определённых в конфиге загрузчиков.

Файлы с расширениями .js и .jsx будут обработаны babel−ом:

• jsx-синтаксис react−а будет преобразован в обычный яваскрипт
• es6/7 синтаксис будет преобразован в es5

Для обработки scss−стилей используется набор лоадеров, в том числе sass-loader:

Здесь мы указываем, что все .scss файлы будут обработаны сначала sass-loader, который на выходе сгенерирует обычный css. Затем в дело вступает resolve-url-loader, задача которого найти относительные пути к файлам в css (например, в директиве url(../image.jpg) ) и преобразовать их в абсолютные (для этого обязательно нужно включить source-map в предыдущем загрузчике). Результат передаётся в css-loader, который непосредственно отвечает за поддержку css в webpack. В случае, если что-то пошло не так, использоваться будет style-loader.

Так, с загрузчиками понятно, а что такое ExtractTextPlugin ? Ответ — это плагин, который сохраняет полученный от загрузчиков текст (исходный код) в отдельные чанки.

А дальше можно сохранить текст из этих чанков в отдельный файл, в данном случае styles.css:

Опция allChunks: true указывает, что нужно все чанки склеить и сохранить в один файл, иначе они будут сохранены в отдельные файлы.

После обработки, вебпак сгенерирует выходные файлы в директории ./static/build/ :

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

После загрузки бандла, его исходный код будет прочитан и исполнен интерпретатором javascript. Также, благодаря опции output.library webpack экспортирует загруженный модуль в переменную с названием секции в entry , в данном случае — bundle . Это очень удобно, так как ваш модуль подключается как библиотека и становится доступен в глобальной области видимости:

Стоит учесть, что webpack может генерировать бандлы, которые при загрузке автоматически подключат нужные стили на страницу, это реализуется с помощью style-loader и особенно удобно при разработке приложений с большим числом страниц или react-компонентов.

Источник

Создание и настройка проекта React + Webpack с нуля до SSR

Хочу вам показать наглядный пример и инструкцию того, как можно самому с «чистого листа» сконфигурировать Webpack для React и Server Side Render’а без каких-либо бойлерплейтов, вроде create-react-app.

Некоторое время назад я начал заниматься созданием сайтов на сей чудесном view-фреймворке и по ходу дела сталкивался со многими проблемами, начиная от того, как правильно и практично реализовать конфиг Webpack’а и как готовить SSR совместно с TypeScript. Было прочитано кучу мануалов, пользовательских решений в гитхабе и прочего, что новичка (да даже иногда и опытных разработчиков) может ввести в ступор. Конечно, можно использовать create-react-app и потом «костылить» eject‘ы (расширение базовой конфигурации), обмазывая все готовыми плагинами, но ведь мы хотим держать весь проект под своим видением, не так ли? Да и просто будет полезно понять весь принцип «приготовления» приложения «от» и «до».

1) На клиенте используем Node JS 13й версии. К сожалению, на момент написания статьи (сентябрь 2020 г.) на >=14 версии не работает Webpack Dev Server (далее WDS) (никак не обновят в нем Chokidar).

2) В проекте будем использовать: Webpack, TypeScript (далее TS), React, React Router, Stylus, ExpressJS.

3) Постараюсь описать каждый установленный npm-пакет и мало мальски важные, на мой взгляд, параметры в Webpack’е.

Вся инструкция предназначена для программистов, которые уже имели опыт с выше описанными технологиями. Расписывая все с самой базы — не хватит и дня на чтение.

Проект основан почти на «голом» React’е, без всяких Redux’ов, MobX’ов, Helmet’ов и тэдэ. Я хочу продемонстрировать принцип работы сборки и запуска проекта на сервере. Все остальное, надеюсь, сможете отредактировать в дальнейшем под себя.

Итак, начнем с инита npm:

Можете и без ключа yes, чтобы предварительно занести нужную информацию в package.json .

Установим все необходимое для Webpack’a и чтобы он мог собирать TS:

• webpack — сборщик собственной персоной
• webpack-cli — позволяет работать с Webpack’ом из консоли
• webpack-dev-server — небольшой сервер для разработки
• webpack-notifier — будет показывать нам уведомления, если вдруг что-то где-то сломаем
• typescript — компилятор TS-кода
• ts-loader — инжектор TS’а в Webpack
• clean-webpack-plugin — при каждой сборке автоматически очищает папку для итоговых файлов
• uglifyjs-webpack-plugin — для продовой версии будет сжимать и минифицировать JS-файлы

Для тех, кто не так давно работает с npm: с параметром —save-dev устанавливаем пакеты, которые нам нужны именно для разработки (webpack, typescript, например), с —save пакеты которые пойдут в сборку (react, react-dom, fontawesome).

Установим React с роутером:

• react — view-фреймворк
• react-dom — плагин, который будет конвертировать React DOM в html-структуру
• react-router-dom — роутер, который интегрируется через React DOM

Для TS нам надо установить типизацию React, чтобы компилятор понимал с какими данными работает и было удобнее писать код в редакторе:

Устанавливаем CSS-препроцессор (я использую Stylus), с которым будем взаимодействовать и пара плагинов, которые наши стили «доведут до ума» перед продом:

• stylus — препроцессор
• stylus-loader — инжектор Stylus’а в Webpack
• css-loader — позволит нам работать в стилях с @import как import/require в JS
• style-loader — встраивает наши стили в DOM
• autoprefixer@9.8.6 — в релизной сборке будет добавлять префиксы к некоторым стилям (например, -webkit-transition). 10я версия в данном кейсе пока что не работает.
• postcss-csso — очень крутой плагин, который минифицирует CSS
• postcss-loader — инжектор PostCSS’а в Webpack

Все нужные плагины для разработки установили, далее немного разберемся с архитектурой наших файлов.

Создадим в корне проекта папку src со всеми исходниками:

Настраиваем TS. Особо сильно в конфигурацию упарываться не будем, пока просто укажем стоковые параметры для компиляции React со строгими правилами. За всей документацией можно сходить на официальный сайт: https://www.typescriptlang.org/docs

В корне проекта создаем файл tsconfig.json :

Сделаем внешний конфиг-файл с модулями и правилами для Webpack. Внешний нужен для того, что мы будем использовать его для 2х конфиг-файлов Webpack’a: клиент и сервер, но это чуть позднее. Документация https://webpack.js.org/concepts/

В корне проекта создаем webpack.config.js :

Создаем в корне проекта файл клиентской конфигурации для Webpack’а webpack.client.js :

Осталось немного. Добавим в корень проекта конфиг PostCSS postcss.config.js :

И добавим скрипты для сборки в package.json с донастройкой PostCSS.

В секцию scripts добавляем команды:

Для Autoprefixer’а в корень json’а добавим параметр, для каких браузеров добавлять префиксы:

Источник

Как с нуля создать проект на React, используя Webpack 4 и Babel

Oct 17, 2018 · 5 min read

Недавно я начал изучать React и для создания проектов я использовал create-react-app, чтобы быстро и без особых усилий добиться желаемого результата. Я подозреваю, что вы тоже используете create-react-app или react-slingshot для создания приложений на React. Ничего не имею против этих инструментов — они хорошо справляются с конфигурацией, в то время как у вас есть возможность сосредоточиться на самом React. Но таким ли способом вы хотите изучить React?

Скорее всего нет, иначе вы бы не читали эту статью.

Начало работы:

Перед тем как мы начнем , вам нужно установить менеджер пакетов nmp на свой компьютер. Он входит в состав Node.js, который вы можете скачать отсюда.

Файловая структура:

Вы можете создать указанные выше каталоги с помощью этих команд:

Инициализация проекта:

Все проекты, которые используют nmp, должны быть инициализированы. Для инициализации проекта — введите следующую команду в терминале:

Это создаст файл package.json

Вам будет предложено ответить на вопросы, касающиеся проекта. Вы можете пропустить их, нажав enter. Если вы хотите пропустить все вопросы разом — добавьте флажок -y:

Теперь файл package.json будет выглядеть примерно так:

Установка Webpack:

Webpack — это модульный сборщик, который позволяет объединять ресурсы и библиотеки, необходимые для проекта, в один файл. Давайте добавим Webpack в наш проект:

Вышеупомянутая команда добавит webpack и webpack-cli в наш проект , в качестве зависимости dev. Мы установили webpack-cli, чтобы у нас появилась возможность использовать webpack в командной строке.

Установка React:

Установим react и react-dom в качестве зависимости.

Установка Babel:

Для того чтобы React работал, необходимо вместе с ним установить Babel. Он поможет в транспайлинге ES6 и JSX в ES5.

Установите babel-core, babel-loader, babel-preset-env, babel-preset-react в качестве зависимости dev.

• babel-core: Преобразует код ES6 в ES5.
• babel-loader: Помощник Webpack для транспайлинга кода, задает пресеты.
• babel-preset-env: Пресет, который помогает babel конвертировать код ES6, ES7 и ES8 в код ES5.
• babel-preset-react: Пресет, преобразующий JSX в JavaScript.

Index.js :

Создайте файл index.js внутри корневой папки / src папки и добавьте в него следующую строчку кода:

Этот файл будет точкой входа в наше приложение.

Index.html :

Создайте файл index.html внутри корневой папки / src папки и добавьте в него следующий код:

Entry и Output файл:

Создайте webpack.config.js в корневом каталоге проекта, чтобы мы могли определить наши webpack loaders.

Определите точку входа и выходной каталог нашего приложения внутри webpack.config.js

В приведенном выше коде, Webpack объединит все наши JavaScript файлы в файл index_bundle.js внутри каталога /dist.

Webpack Loaders:

Теперь добавьте в этот файл loaders, которые будут ответственны за загрузку и объединение исходных файлов.

Внутри webpack.config.js добавьте следующие строки кода:

Здесь babel-loader используется для загрузки наших JSX/JavaScript файлов, css-loader для загрузки и объединения всех CSS файлов в один, а style-loader добавит все стили внутрь тега документа style.

Прежде чем Webpack сможет использовать css-loader и style-loader, мы должны установить их в качестве зависимости dev:

Имейте в виду, что Webpack выполняет loaders в обратном порядке: с последнего до первого, то есть справа налево.

.babelrc:

Теперь создайте файл .babelrc внутри корневого каталога проекта, со следующим содержимым:

Данный файл сообщит babel, какие из пресетов использовать для транспайлинга кода. Здесь мы используем два пресета:

• env: Этот пресет используется для транспайлинга кода ES6/ES7/ES8 в ES5.
• react: Этот пресет используется для транспайлинга кода JSX в ES5.

Компиляция файлов с помощью Webpack:

Добавьте следующие строки кода в объект script файла package.json, как показано ниже:

Здесь я воспользовался флажком watch, поэтому всякий раз, когда происходит изменение исходных файлов, webpack автоматически скомпилирует все исходные файлы.

В Webpack 4 есть два режима: режим production, который создает оптимизированные файлы, готовые к использованию в режиме production и режим development, который создает легко читаемый код. Флажок —mode позволяет выбрать, какой режим использовать.

Теперь вы можете скомпилировать проект, воспользовавшись следующей командой:

После выполнения вышеприведенной команды, вы увидите файл index_bundle.js, созданный в каталоге /dist . Файл будет содержать код ES5 из файла index.js.

App.js

Создайте файл App.js внутри папки components, находящейся в папке src , со следующим содержимым внутри него:

App.css:

Создайте файл App.css внутри папки styles, находящейся в папке src , со следующим содержимым внутри него:

Данный CSS файл используется, чтобы убедиться, что css-loader и style-loader работают корректно.

Измените файл index.js, который мы создали ранее, добавив следующие строки кода:

Установка Html-webpack-plugin:

Теперь нам нужно установить html-webpack-plugin. Этот плагин генерирует HTML файл, затем вставляет в него скрипт и записывает файл на dist/index.html.

Установите html-webpack-plugin, в качестве зависимости dev:

Теперь нам нужно настроить этот плагин внутри файла webpack.config.js, добавив в него следующий код:

В каталоге /dist мы создаем файл шаблона index.html с введенным скриптом.

Установка почти завершена, осталось скомпилировать исходные файлы с помощью webpack. Вы можете запустить проект, используя следующую команду:

Вы получите выходные данные внутри каталога /dist. Откройте index.html в браузере и вы увидите текст “My React App!”.

У этого подхода есть один недостаток: вам нужно каждый раз вручную обновлять веб-страницу, чтобы увидеть сделанные вами изменения. Чтобы webpack обновлял веб-страницу всякий раз, когда какие-либо изменения вступают в силу, мы можем установить webpack-dev-server.

Установка Webpack-dev-server:

Установите webpack-dev-server, в качестве зависимости dev:

И измените скрипт start в файле package.json, как показано ниже:

Я добавил два флажка —open и —hot , которые ответственны за обновление веб-страницы всякий раз, когда происходят какие-либо изменения в компонентах.

Выполните следующую команду в терминале:

Вы должны увидеть окно браузера, в котором будет точно такое же содержимое, как на следующем скриншоте:

Вот и все, теперь у нас есть собственный boilerplate (шаблон) React, который мы можем использовать для создания наших проектов на React. Также вы можете скачать данный шаблон с моего Github.

Источник