Webpack для начинающих разработчиков

Элементарное представление о сборщике webpack для новичков.

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

Файлы в типичном проекте «требуют» нескольких ресурсов или зависимостей, которые по своей природе могут быть основаны на коде, например, пакеты узлов / другие файлы JS, или не основанные на коде ресурсы, такие как изображение, веб-шрифты, звук и т. Д.
порядок, в котором эти зависимости должны быть загружены и в файлах 'require' -ed или 'import' -ed, приводит к результату Dependency Graph. Следовательно, График зависимостей определяет все необходимые прямые или косвенные зависимости модуля / актива в приложении.

Точки входа

Когда webpack обрабатывает любое приложение, он начинает с «точки входа» для рекурсивного построения внутреннего графа зависимостей, «который включает все модули, необходимые вашему приложению, а затем объединяет все эти модули в небольшое количество связки - часто всего один ».

По умолчанию значение ‘./src/index.js’ действует как точка входа модуля для любого приложения в webpack. Rest webpack определяет все (прямые или косвенные) зависимости модулей и библиотек для входного модуля.

Точка вывода / с

И наоборот, «Точка вывода» определяет, куда Webpack помещает / передает сгенерированные пакеты распространения. По умолчанию используется папка ‘./dist’ для всех статических ресурсов и ‘./dist/main.js’ основной выходной файл.

Содержимое «./dist» готово к использованию и представляет собой автономный образ действующего веб-приложения. Теперь вы просто загружаете содержимое dist / в свой CDN, развертываете новый код, чтобы увидеть приложение в реальном времени.

Обработка файлов других типов - Загрузчики

Забегая вперед, одно важное замечание относительно webpack касается готовой поддержки только JavaScript и JSON. Решение Webpack для обработки файлов других типов - Загрузчики. Загрузчики позволяют webpack обрабатывать другие типы файлов и преобразовывать их в допустимые« модули , которые могут быть использованы вашим приложением и добавлены в граф зависимостей».

Загрузчики определяются как «правила» для обработки модуля, который имеет два обязательных свойства, а именно «тест» и «использование». Тест определяет, какие файлы следует преобразовать, и принимает регулярное выражение в качестве значения типа «/.png$/» для проверки типа файла. Использование указывает, какой загрузчик следует использовать для преобразования, и принимает строковое значение для примера имени загрузчика «файл» для Загрузчика файлов.

С точки зрения непрофессионала, эта конфигурация сообщит webpack:

« Привет, компилятор webpack, когда вы встретите путь, который разрешается в файл '.png' внутри оператора require () / import, используйте Загрузчик файла, чтобы преобразовать его перед добавлением в пакет .

Написание собственной пользовательской конфигурации

Вышеуказанная пользовательская конфигурация подводит нас к следующей теме написания пользовательской конфигурации веб-пакета.

Можно создать простой настраиваемый файл конфигурации веб-пакета со следующим содержимым:

Здесь «путь» - это основной модуль Node.js, используемый для обработки путей к файлам в соответствии с платформой ОС клиента.

«entry» - это настраиваемый модуль ввода. Здесь важно обсудить, что запись может принимать объект, состоящий из нескольких путей модуля входа.

module.exports = {
                  entry: {
                          app: './src/app.js',
                          adminApp: '.src/adminApp.js'
                          }
                  }

Это известно как многоосновная запись. Дополнительную ссылку можно найти в разделе Точки входа.
Эту нотацию также можно связать со значением объекта для свойства output.path, которое будет генерировать отдельный пакет выходных данных для каждой записи. Объект будет выглядеть так:

output: {
         path: outputWebpackPath,
         filename: '[name]/js/[name].js'
         }

Имя файла как «[имя] .js» используется для использования самого имени записи для имени выходного файла.

Дополнительную информацию можно найти в Выводе. Все они образуют базовый набор свойств конфигурации для создания собственной пользовательской конфигурации веб-пакета. Чтобы выполнить вышеупомянутую конфигурацию webpack, запись scripts в package.json может быть изменена как webpack-script-name: webpack - config webpack.modules.config.babel. js - display-error- details . Здесь передается параметр - config, за которым следует имя файла конфигурации пользовательского веб-пакета. - display-error-details - это дополнительный параметр, который может быть передан дополнительно для отображения сведений об ошибке в случае ошибок времени выполнения.

Здесь важно следить за совместимостью браузера с webpack, поскольку он поддерживает браузеры, «совместимые с ES5», поэтому IE8 и ниже не поддерживаются.

Преимущества Webpack

Преимущества, которые дает webpack, много, но некоторые основные и важные преимущества можно кратко изложить, как показано ниже:

  • Устранение мертвого кода или встряхивание дерева
  • Устранение мертвых активов
  • Большой контроль разработчиков над обработкой активов

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

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