Меню

Настройка webpack для 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:

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

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

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

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

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

Создадим в корне проекта папку 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 :

Читайте также:  Сбросить настройки netgear wnr2200

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

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

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

Источник

Создание и настройка базового проекта ReactJS в связке с Redux с нуля с использованием Webpack

Sergey Bakaev

Feb 20, 2019 · 6 min read

В этой статье рассказывается о том, как создать базовый проект для работы с фреймворком ReactJS с нуля. Да, сейчас можно использовать create-react-app для быстрого старта. Но важно разобраться в том, как это работает для лучшего понимания.

Исходный код проекта можно взять тут:

subakaev/reactjs-boilerplate

Contribute to subakaev/reactjs-boilerplate development by creating an account on GitHub.

github.com

Инициализация

Установка и настройка Babel

Babel нужен нам для того, чтобы пользоваться последними возможностями языка JavaScript. Для его установки нужно выполнить следующую команду в терминале:

Установка фреймворка для тестирования Jest

Для того, чтобы писать и запускать автоматические тесты, необходимо установить следующий набор пакетов:

Также в секции scripts файла package.json необходимо добавить строчку:

Установка и конфигурирование линтера eslint

Линтер необходим для отслеживания корректности синтаксиса кода. Необходимо выполнить установку следующих пакетов:

Установка пакетов для работы с ReactJS&Redux

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

Создание тестового приложения

Создадим простое приложение на React&Redux. Также дополнительно подключим фреймворк bootstrap 4 для стилевого оформления. В качестве тестового приложения сделаем счетчик, который можно будет увеличивать или уменьшать с помощью кликов по соответствующим кнопкам.

Для начала установим bootstrap и все пакеты, которые необходимы нам для работы с ним:

Я здесь специально не стал подключать скрипты, необходимые для работы с ReactJS. Это будет сделать сделано позже автоматически с использованием сборщика Webpack. Тоже самое касается и стилей css. Дополнительно я добавил в проект каталог img для хранения различных изображений и добавил туда картинку, которая будет фавиконом.

Для хранения пользовательских стилей была создана папка css и файл main.scss внутри. Определим в нем простой пользовательский класс, который используем далее.

После этого приступим непосредственно к созданию приложения на React.

В итоге должна получиться следующая структура проекта:

App.jsx — главный компонент приложения. Именно он рендерится в DOM.

Редьюсер необходим нам для обработки действий и изменения значения счетчика.

Здесь происходит инициализация redux и рендеринг нашего приложения.

Теперь нам нужно сделать так, чтобы все это запускалось и работало. Для этого будет использоваться сборщик Webpack.

Установка и настройка Webpack

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

Также нам для настройки сборки потребуются следующие webpack-плагины:

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

Настройка конфигурации для debug

Теперь по порядку что у нас здесь происходит.

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

Читайте также:  Настройка общего доступа к папке по сети в windows

После идут правила для обработки изображений.

Далее идет секция плагинов.

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

SourceMapDevToolPlugin необходим при разработке для генерирования source maps для удобной отладки возникающих ошибок. Без source maps было бы невозможно увидеть нормальный stacktrace ошибки.

HotModuleReplacementPlugin отвечает за перезагрузку страницы при изменении кода.

HtmlWebpackPlugin упрощает создание HTML файлов путем подстановки в них собранных webpack’ом сборок. Это очень удобно, особенно для тех сборок, которые включают hash в название выходного файла сборки, который меняется каждую компиляцию. Работает как для js файлов, так и для стилей.

Настройка сборщика для production сборок

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

Следующее отличие состоит в том, что нам не требуется для сборки js/jsx файлом использовать плагин для “горячей перезагрузки”, поскольку это нужно только при разработке. HotModuleReplacementPlugin нам также не нужен здесь.

MiniCssExtractPlugin используется разбиения css по файлам. Он создает css файл для каждого js файла, в котором используются css.

CleanWebpackPlugin очищает директорию dist перед началом сборки.

Также появился раздел optimization :

UglifyjsWebpackPlugin использует uglify-js для минификации js файлов.

imagemin-webpack-plugin используется для сжатия изображений.

Источник

Webpack: руководство для начинающих

Доброго времени суток, друзья!

Представляю вашему вниманию перевод статьи «Webpack: A gentle introduction» автора Tyler McGinnis.

Перед изучением новой технологии задайте себе два вопроса:

Зачем нужен вебпак?

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

Какие проблемы решает вебпак?

Обычно, при создании приложения на JavaScript, код разделяется на несколько частей (модулей). Затем в файле «index.html» необходимо указать ссылку на каждый скрипт.

Это не только утомительно, но и подвержено ошибкам. Важно не только не забыть про какой-нибудь скрипт, но и расположить их в правильном порядке. Если загрузить скрипт, зависящий от React, до загрузки самого React, приложение сломается. Вебпак решает эти задачи. Не нужно беспокоиться о последовательном включении всех скриптов.

Как мы скоро узнаем, сбор модулей является лишь одним из аспектов работы вебпака. При необходимости можно заставить вебпак осуществить некоторые преобразования модулей перед их добавлением в бандл. Например, преобразование SASS/LESS в обычный CSS, или современного JavaScript в ES5 для старых браузеров.

Установка вебпака

webpack.config.js

Основной задачей вебпака является анализ модулей, их опциональное преобразование и интеллектуальное объединение в один или более бандл, поэтому вебпаку нужно знать три вещи:

Точка входа

Сколько бы модулей не содержало приложение, всегда имеется единственная точка входа. Этот модуль включает в себя остальные. Обычно, таким файлом является index.js. Это может выглядеть так:

Читайте также:  Настройка bios gigabyte для загрузки с флешки windows 7

Если мы сообщим вебпаку путь до этого файла, он использует его для создания графа зависимостей приложения. Для этого необходимо добавить свойство entry в настройки вебпака со значением пути к главному файлу:

Преобразования с помощью лоадеров (loaders)

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

По умолчанию при создании графика зависимостей на основе операторов import / require() вебпак способен обрабатывать только JavaScript и JSON-файлы.

Едва ли в своем приложении вы решитесь ограничиться JS и JSON-файлами, скорее всего, вам также потребуются стили, SVG, изображения и т.д. Вот где нужны лоадеры. Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Первым делом нужно установить лоадер. Поскольку мы хотим загружать SVG, с помощью npm устанавливаем svg-loader.

Далее добавляем его в настройки вебпака. Все лоадеры включаются в массив объектов module.rules :

Существуют лоадеры почти для любого типа файлов.

Точка выхода

Теперь вебпак знает о точке входа и лоадерах. Следующим шагом является указание директории для бандла. Для этого нужно добавить свойство output в настройки вебпака.

Весь процесс выглядит примерно так:

Плагины (plugins)

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

Давайте рассмотрим пример.

HtmlWebpackPlugin

HtmlWebpackPlugin создает index.html в директории с бандлом и автоматически добавляет в него ссылку на бандл.

Как нам использовать этот плагин? Как обычно, сначала его нужно установить.

EnvironmentPlugin

HtmlWebpackPlugin и EnvironmentPlugin — это лишь небольшая часть системы плагинов вебпака.

Режим (mode)

Существуют специальные плагины для решения указанных задачи, но есть более легкий способ. В настройках вебпака можно установить mode в значение development или production в зависимости от среды разработки.

Запуск вебпака

На данный момент мы знаем, как работает вебпак и как его настраивать, осталось его запустить.

Режимы разработки и продакшна

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

При сборке для продакшна, мы хотим все оптимизировать, насколько это возможно. В случае с режимом разработки верно обратное.

npm run build будет собирать продакшн-бандл.

npm run start будет запускать сервер для разработки и следить за изменениями файлов.

Сервер для разработки

Теперь у нас имеется две команды: одна для запуска сервера для разработки, другая для сборки готового бандла.

Надеюсь, статья была вам полезной. Благодарю за внимание.

Источник