Мне всегда казалось странным использовать команду 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 г.