Эффективный расцепитель рабочего процесса Webpack и код приложения

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

  • Наблюдение, в идеале, через Gulp, с эффективным кэшированием. (Не думайте, что мне нужна горячая замена модуля, и подозревайте, что она не подходит для моей среды для разработчиков.)

  • Модули поставщика (прямо сейчас у меня есть только пакеты npm, а не все из них, отображающие глобальные глобальные карты UMD в их основном файле, если они дошли до этого), которые

    а. не анализируется и повторно скомпилируется во время просмотра (поэтому перекомпиляция выполняется быстрее),

    б. не получают sourcemap (поэтому браузер devtools быстрее реагирует) и

    с. напишите в отдельный пакет vendor.js, который браузеры могут кэшировать отдельно от пакетов приложений.

  • Модули приложений, которые

    а. явно о всех зависимостях (т.е. import React from 'react';, даже если React фактически открыт для всего мира или что-то через # 2),

    б. повторно скомпилированы во время просмотра, и

    с. получить исходную карту.

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

Хотя я вижу в документах, как создать пакет, специфичный для вендора (воспроизведенный здесь: Простое решение для обмена модулями, загружаемыми через NPM через несколько пакетов Browserify или Webpack), представленный простой пример не адресует 2a и 2b.

Я не вижу в документах каких-либо способов указывать разные конфигурации компиляции (исходные карты и т.д.) для разных фрагментов или создавать полностью отдельные пакеты Webpack с отдельными конфигурационными файлами, которые могут ссылаться друг на друга, если только глобализация всех библиотеки поставщиков и использовать их как внешние (?), что не идеально...

Кроме того, мне любопытно, используют ли пользователи Gulp gulp-webpack, а не такие настройки, как в http://webpack.github.io/docs/usage-with-gulp.html. (Я не уверен, насколько хорошо webpack-dev-server будет вписываться в среду моего dev, поэтому, если это возможно, нужно придерживаться gulp-watch).

Я пропустил то, о чем знают другие пользователи Webpack? Какой лучший способ сделать это?

ИЛИ возможно ли, что Webpack не подходит для работы?

Ответы

Ответ 1

Наблюдение, в идеале, через Gulp, с эффективным кэшированием. (Не думайте, что мне нужна горячая замена модуля, и подозревайте, что она не подходит для моей среды для разработчиков.)

Используйте webpack-dev-server.

Для этого вам действительно не нужен Gulp, но вы можете использовать его API Node с Gulp (я это делаю).

Модули поставщика (прямо сейчас у меня есть только пакеты npm, а не все из них, отображающие глобальные глобальные карты UMD в их основном файле, если они дошли до этого), которые

а. не анализируется и повторно скомпилируется во время просмотра (поэтому перекомпиляция выполняется быстрее),

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

б. не получают sourcemap (поэтому браузер devtools быстрее реагирует) и

Не знаю, как это сделать. Я думаю, что исходные карты либо все, либо все. Но вы можете использовать devtool: 'eval', который работает намного быстрее, чем исходные карты.

с. напишите в отдельный комплект vendor.js, что браузеры могут кэшировать отдельно от пакетов приложений.

Я думаю, что вы ищете split-by-name-webpack-plugin.

Модули приложений, которые

а. явным образом обо всех зависимостях (т.е. import React from "реагировать", даже если React фактически открыт глобально или что-то через # 2),

Это сработает. В require глобально открытые библиотеки используйте externals вариант конфигурации.

б. повторно скомпилированы во время просмотра, и

Что изменилось, будет перекомпилировано (если вы используете webpack-dev-сервер).

Это не отвечает на все ваши вопросы, но я надеюсь, что этого достаточно, чтобы выяснить, работает ли это для вас. Я не думаю, что "не смотреть библиотеки" - такая большая проблема, как вы говорите (очень мало штрафа за восстановление кэшированных модулей), и если вы раскошелитесь на исходные карты и используете devtool: 'eval', я бы сказал это очень быстро. Наконец, появилось новое смотрящее решение в работе для Webpack, чтобы вы могли его отбросить. Это должно быть еще лучше.