Настройка нескольких сред с помощью Webpack — важная функция, которую должен использовать каждый.
С уровнем детализации, предлагаемым Webpack, может быть трудно найти инструкции именно для того, что вы ищете.
В этой статье я покажу, как я настраиваю свои среды. Мой пример включает реализацию сред, отличных от обычных для разработки и производства.
Приведу примеры 4-х сред: Local, Cypress, Development, Production. Мое подтверждение находится внутри файла webpack.config.js.
Для начала я создаю общий объект, содержащий любые конфигурации, используемые всеми средами:
После этого я добавляю новый объект конфигурации Webpack для каждой среды, которую я хочу поддерживать. Используя оператор распространения, я могу легко включить все значения из общего:
Теперь я могу адаптировать каждый из этих объектов для поддержки того, что мне нужно.
В моем случае как локальная, так и кипарисовая среда запускают webpack-dev-server, но кипарису не нужна каждая локальная конфигурация. Точно так же моя среда разработки и рабочая среда используют другой файл index.html, который позволяет мне использовать эта конфигурация.
После того, как мои объекты настроены, мне нужно добавить оператор return в конец моего файла.
Вот полный пример файла:
Последний шаг — установить NODE_ENV, когда я вызываю определенную команду из своих сценариев:
В большинстве примеров NODE_ENV устанавливается либо на разработку, либо на производство, но ничто не мешает вам установить для него любое значение, которое вы хотите.
Надеюсь, мой пример даст вам некоторые идеи о том, как вы можете настроить свою собственную конфигурацию Webpack. Я уверен, что есть способы, которыми вы даже можете взять мой и реорганизовать его, чтобы сделать его еще более эффективным.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
