Мне всегда казалось странным использовать команду webpack-cli webpack-dev-server вместо webpack в моем сценарии npm для разработки. И вот, в прошлом месяце был выпущен webpack-plugin-serve, новый плагин для веб-пакетов, который можно использовать вместо причудливого webpack-dev-server.

Я использую довольно простую разделенную конфигурацию из моего приложения uiCookbook/sidebars, чтобы продемонстрировать, как заменить webpack-dev-server новым плагином webpack-plugin-serve.

Требования

Активная версия LTS Node, например, версия 8.0.0+ или версия 10.0.0+. Прочтите документацию webpack-plugin-serve для получения дополнительной информации.

Демонстрационное приложение

Начните с клонирования или загрузки репозитория uiCookbook, содержащего приложение боковых панелей. Следующая команда git clone использует параметр --branch для указания тега 2018-09-sidebars. Этот тег представляет версию репозитория с контрольной суммой, предшествующую изменению на webpack-plugin-serve в текущей версии приложения.

# clone 2018-09-sidebars tag in uiCookbook repo
git clone https://github.com/jimfrenette/uiCookbook.git --branch=2018-09-sidebars

# change to sidebars directory    
cd uiCookbook/sidebars

Прежде чем вносить какие-либо изменения, убедитесь, что приложение собрано для вас.

# install node_modules    
npm i

# run dev build
npm run dev

Веб-браузер должен открыться с приложением, загруженным на локальном хосте, как показано ниже.

Убедившись, что приложение создано, а сервер разработки запущен на локальном хосте, отмените запущенный процесс, нажав Ctrl + C.

Заменить пакеты

Давайте удалим и заменим пакеты и модули npm из приложения следующим образом.

Замените сервер разработки webpack.

npm uninstall webpack-dev-server

# install webpack-plugin-serve
npm i webpack-plugin-serve --save-dev

Замените webpack-cli на webpack-nano. Этот новый интерфейс командной строки Webpack является оптимальным решением, он очень маленький (~ на 90% меньше, чем webpack-cli и webpack-command) и позволяет использовать неограниченное количество настраиваемых флагов. "больше информации"

npm uninstall webpack-cli

# install webpack-nano
npm i webpack-nano --save-dev

npm-run-скрипт

В файле package.json обновите свойства scripts.dev и scripts.build для webpack-nano для запуска сборок. Вместо этого все применимые параметры, например, mode и watch, будут добавлены в соответствующие файлы конфигурации.

package.json

...

  "scripts": {
    "dev": "wp --config config/dev.config.js",
    "build": "wp --config config/prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  • Обратите внимание, что многоточие ... в приведенном выше фрагменте кода не является частью фактического кода и используется только для обозначения кода, который пропускается и не применим к примеру. Чтобы просмотреть весь файл, изучите исходный код.

Конфигурация веб-пакета

Конфигурация разделена на три файла, расположенных в папке config. base.config.js содержит код, общий для конфигураций dev.config.js и prod.config.js. Начните с добавления объекта const, чтобы включить модуль webpack-plugin-serve в верхнюю часть файла dev.config.js, где определены другие константы. При этом создайте новый экземпляр Serve с именем serve, который содержит параметры нашего сервера разработки.

dev.config.js

...

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

const serve = new Serve({
  host: 'localhost',
  static: ['./'],
  open: true,
  liveReload: true
});

Затем обновите module.exports следующим образом. Обратите внимание, что здесь мы устанавливаем флаги mode и watch вместо нашего скрипта npm.

dev.config.js

...

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    app: ['webpack-plugin-serve/client']
  },
  plugins: [
    serve,
    new writeFilePlugin()
  ],
  watch: true
});

Обновлен файл dev.config.js.

Затем в base.config.js измените значение свойства entry.app на массив, чтобы webpack-merge обработало его правильно, поскольку мы добавили свойство entry.app к dev.config.js на предыдущем шаге.

base.config.js

...

  entry: {
    app: ['./js/index.js']
 },

В конфигурации производственной сборки мы добавляем только mode: 'production' к module.exports.

prod.config.js

...

module.exports = merge(baseConfig, {
  mode: 'production',

Вот и все. Снова запустите сборку для разработчиков, на этот раз с обновленной конфигурацией.

npm run dev

Исходный код

Дополнительные ресурсы

Минимальная установка React, Webpack, Babel: использование webpack-plugin-serve — Ищете базовую конфигурацию React Webpack, которая использует webpack-plugin-serve? Как и выше, эта вилка шаблонного проекта Robin Wieruch на GitHub была немного изменена, чтобы также использовать новый webpack-plugin-serve от shellscape вместе с их заменой CLI webpack-nano. Исходный код на GitHub

Первоначально опубликовано на сайте jimfrenette.com 17 декабря 2018 г.