Введение в Webpack

Введение в Webpack

Часть 2: Настройка Webpack для режимов разработки и производства

Привет! Добро пожаловать во вторую часть этой серии сообщений (если вы не читали часть 1, прочтите ее здесь). В прошлый раз я разбил модуль Webpack и рассказал о том, как определить точку входа для нашего внешнего кода, указать путь для наших связанных файлов, как скомпилировать наши файлы, не относящиеся к JavaScript, в читаемый JavaScript, а свойства плагина для любых задач не могут обрабатываться. В этом посте основное внимание будет уделено настройке Webpack для рабочего режима и развертыванию производственных пакетов. В этой статье я предполагаю, что вы понимаете основы конфигурации Webpack, включая загрузчики и плагины Webpack, а также импорт сторонних модулей с помощью NPM. С учетом сказанного, давайте сразу же приступим!

Разработка Vs. Производство

Webpack использует наш код в режиме разработки, обеспечивая отображение источников и оперативную перезагрузку / замену горячего модуля с использованием локального хост-сервера. Он используется для определения момента перехода между локальным кодом и сторонним кодом (загрузчиками и плагинами) при оптимизации нашего кода. Плагины и загрузчики обрабатывают все, чего Webpack уже не может достичь с помощью собственного кода. Например, любой модуль, требующий использования глобальных переменных, может обрабатываться import-loader, который вставляет глобальные переменные в модуль. Или мы можем использовать HtmlWebpackPlugin для создания файлов HTML для обслуживания нашего связанного кода. Если вы хотите узнать, какие плагины доступны, в документации Webpack есть список доступных плагинов.

Создавая производственную сборку, мы стремимся выполнить задачу минимизации наших пакетов, облегчения исходных карт и оптимизации ресурсов, таких как файлы изображений. Webpack использует этот процесс, обеспечивая плавную компиляцию и отсутствие ошибок в нашем коде. Поскольку конфигурация для Webpack различается между режимами разработки и производства только по нескольким аспектам, рекомендуется разделять разные конфигурации в отдельный файл. Таким образом мы избегаем повторения кода. В приведенном ниже примере демонстрируется реализация трех файлов: webpack.config.js, webpack.config.development.js и webpack.config.production.js . Как предполагают их тезки, последние два файла строят графы зависимостей по отношению к режимам разработки и производства, соответственно, а первый будет содержать любые общие требования к конфигурации.

Каждая из конфигураций режима разработки и производства использует только некоторые загрузчики и плагины, отсюда и разделение модуля Webpack на три отдельных модуля. Первый модуль webpack.config.js будет обрабатывать определение точек входа и пути вывода, а также любых загрузчиков и подключаемых модулей, используемых совместно при настройке как для режима разработки, так и для рабочего режима.

Второй модуль webpack.config.development.js будет обрабатывать создание исходной карты, которая будет определять исходное расположение различных фрагментов в файле пакета, которые созданы из более чем один исходный файл. Например, если bundle.a.js - это результат компиляции module.a.js, module.b.js и module.c.js в один файл, тогда наша исходная карта должна иметь возможность указывать, какие фрагменты в bundle.a.js получены из module.a.js , module.b.js или module.c.js. Модули конфигурации разработки и производства также импортируют webpack-merge, что позволяет нам использовать параметры конфигурации из общего модуля Webpack с помощью встроенной функции merge () в каждом режиме среды.

Третий модуль будет обрабатывать нашу конфигурацию для производственного режима. Как упоминалось для первых двух модулей, webpack.config.production.js будет определять только загрузчики и плагины, которые он будет использовать исключительно, а также объединить общую конфигурацию из первого модуля.

Это все на сегодня! Спасибо, что прочитали вторую часть моей серии статей об основах Webpack! До скорого!

Источники цитируются

Конфигурация | Webpack . Webpack, https://webpack.js.org/configuration/. Доступ 21 июля 2021 г.

Оуэнс, Том. Webpack 5 готов к работе. 1-е изд., Packt Publishing, 2020, стр. 80–94, 118–24.