Когда я прошел свой первый класс React JS, меня научили использовать приложение create-response-app для запуска нового проекта React JS. Обсудив это с моим наставником, я понял, что это не способ создания и развертывания приложения в производственной среде. С тех пор, как появилось приложение create-react-app, начало нового проекта стало для новичка очень простым, но его извлечение из среды CRA - нелегкая прогулка. После завершения обучения я начал изучать производственный способ разработки, и одним из самых больших открытий стал Webpack. Итак, сегодня я расскажу вам, как очень легко настроить приложение для реагирования с помощью Webpack.

Что такое Webpack?

Webpack - это библиотека javascript с открытым исходным кодом, которая используется для объединения модулей, а также статических ресурсов (например, изображений, шрифтов, файлов CSS и т. д.) в зависимости от переданных в нее загрузчиков. Обычно файл js содержит все конфигурации веб-пакетов. Помимо объединения модулей и ресурсов, webpack также предоставляет сервер разработки, который используется во время разработки. Нам нужно будет это закодировать, и мы сделаем это в следующем разделе, но сначала позвольте нам заставить работать другие вещи.

Шаги по настройке приложения React

Совершенно очевидно, что чтобы начать новый проект, вам нужно создать новую папку / каталог, вы можете создать его с помощью графического интерфейса или просто запустите простую команду mkdir ‹folder_name›

  • Шаг 1 (инициализировать каталог с помощью npm): чтобы установить пакеты, вам необходимо инициализировать каталог с помощью следующей команды (Примечание: флаг -y используется для выбора предопределенных параметров и записи по умолчанию как index.js):
npm init -y
  • Шаг 2 (Установка пакетов Webpack): Чтобы использовать возможности Webpack, вам необходимо установить пакеты с помощью следующей команды:
npm i webpack webpack-cli webpack-dev-server --save-d
  • Шаг 3 (установка транспилятора babel): Babel - очень важный инструмент, конвертирующий код ECMAScript 2015 и выше в старые совместимые версии. Вам необходимо установить 4 пакета. babel-loader используется webpack для загрузки необходимых файлов, babel-preset-env используется для преобразования кода javascript в синтаксис ES5 и babel-preset- response используется для преобразования JSX (HTML, который вы пишете в своем коде) в JS. Чтобы установить эти пакеты, вам нужно запустить команду в своей оболочке.
npm i babel-core babel-loader babel-preset-env babel-preset-react --save-d
  • Шаг 4 (Установка необходимых библиотек реакции): Теперь, чтобы продолжить, нам нужна фактическая библиотека реакции и другая библиотека, называемая response-dom, которая фактически отвечает за все великолепие, предлагаемые React (виртуальная модель DOM). Выполните следующую команду в своей оболочке:
npm i react react-dom
  • Шаг 5 (плагины React HTML): Чтобы создать файл HTML / использовать существующий шаблон, мы используем эти плагины. Установите их с помощью этой простой команды:
npm i html-webpack-plugin html-loader --save-d
  • Шаг 6 (Установите все типы загрузчиков): чтобы импортировать ресурсы, нам необходимо предоставить эти загрузчики в webpack. Выполните следующую команду:
npm i file-loader style-loader css-loader --save-d
  • Шаг 7 (Чтобы уменьшить размер, нам нужен этот дополнительный пакет): Uglify (в отличие от prettify) в основном сжимает ваш код при сборке, уменьшая размер. Запустите эту команду:
npm i uglifyjs-webpack-plugin --save-d

На этом завершается первая часть создания нашего приложения реакции с помощью webpack. Теперь в этом разделе мы коснемся (создадим) файлы и создадим простое приложение hello world.

Во-первых, мы создадим наш файл конфигурации webpack, выполнив следующие действия:

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

Построчное объяснение будет бесполезно для новичка, но я постараюсь научить вас этой части. Во-первых, мы импортируем все необходимые библиотеки, среди которых у нас есть путь (чтобы указать путь к файлу для webpack), html-webpack-plugin, который обслуживает шаблон или генерирует новый файл HTML, webpack довольно очевиден для импорта, поскольку мы пишем файл конфигурации webpack и плагин Uglify-js-plugin - это не что иное, как способ уменьшить размер окончательного файла путем его удаления.

Двигаясь вперед, мы экспортировали и объект, который содержит конфигурацию. Ключи в этом объекте - это запись (которая указывает, что это первое место, где начинается реакция, я делаю это как client / index.js, поэтому я начинаю кодировать только с этим файлом), Вывод (это это то место, где мы планируем, что наша сборка, наконец, создана для перехода. просто позаботьтесь о свойстве contentBase, которое является путем к вашей папке сборки, ключ модуля предназначен для загрузчика, который вы должны передать загрузчику, установленному вместе с выражением (test), чтобы определить тип файла, который вы хотите загрузить с этим загрузчиком, и Наконец, плагины предоставляются веб-пакету для некоторых операций, например, для изменения сборки, обслуживания файла HTML и т. Д.

2. Создайте файл .babelrc, чтобы запустить транспилятор babel. Его содержимое является объектом, вот оно:

3. Создайте общедоступную папку, содержащую папку dist и файл i ndex.html со следующим шаблоном:

4. Создайте папку client, которая будет содержать код для внешнего интерфейса.

5. Внутри клиентской папки создайте файл index.js со следующим содержимым:

6. Отредактируйте файл package.json и внесите следующие изменения:

7. Момент истины выполните команду:

npm start

Полный код можно найти в этом репозитории git: https://github.com/assembler123/webpack-scratch

Спасибо за чтение.