Рубрики
Без рубрики

Новый плагин сервера разработки WebPack

Я всегда думал, что было странно использовать команду WebPack-Cli WebPack-Dev-Server вместо WebPack в m … Tagged с Webpack, JavaScript, WebDev.

Я всегда думал, что было странно использовать Webpack-cli Команда Webpack-dev-server вместо WebPack В моем сценарии NPM для разработки. Вот и вот, в прошлом месяце, Webpack-Plugin-Serve был выпущен, новый плагин WebPack для использования вместо странного WebPack-Dev-Server.

Я использую довольно базовую конфигурацию разделения из моего Uicookbook/боковой панели Приложение, чтобы продемонстрировать, как заменить Webpack-dev-server с новым Webpack-Plugin-Serve плагин

Требования

Active LTS Узел Версия, например, версия 8.0.0+ или версия 10.0.0 +. Прочитайте Webpack-Plugin-Serve Документация для получения дополнительной информации.

Демо -применение

Начните с клонирования или загрузка Репозиторий Uicookbook, содержащий приложение боковых панелей. Следующее git clone Команда использует -Бранч Возможность указать 2018-09-сторона ярлык. Этот тег представляет собой версию контрольной суммы репо, которая предшествует изменению на 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

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

После подтверждения того, что приложение создает и Dev Server работает на LocalHost, отмените процесс работы с CTRL + C.

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

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

Замените сервер разработки WebPack. Кроме того, удалите write-file-webpack-plugin Поскольку это работает только с Webpack-dev-server Анкет

npm uninstall webpack-dev-server
npm uninstall write-file-webpack-plugin

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

Заменить Webpack-cli с Webpack-nano Анкет Этот новый WebPack CLI является оптимальным решением, оно очень крошечное (~ 90% меньше, чем WebPack-Cli и WebPack-Command) и позволяет неограниченным пользовательским флагам. больше информации

npm uninstall webpack-cli

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

NPM-Run-Script

В Package.json Файл, обновить Scripts.dev и Scripts.Build Свойства для Webpack-nano запустить сборки. Все применимые варианты, например, режим и Смотреть вместо этого будет добавлено в соответствующие файлы конфигурации.

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"
  },

Обратите внимание, что ellipsis ... В приведенном выше фрагменте кода не является частью фактического кода и существует ли только для обозначения кода, который пропускается и не применим к примеру. Чтобы просмотреть весь файл, проверьте исходный код Анкет

Конфигурация WebPack

С тех пор, как write-file-webpack-plugin был удален, обязательно удалите его из файла конфигурации.

dev.config.js
// delete this line:
const writeFilePlugin = require('write-file-webpack-plugin');

Конфигурация разделена на три файла, расположенные в конфигурация папка. base.config.js Содержит код, общий для обоих dev.config.js а также prod.config.js конфигурации. Начните с добавления const объект, чтобы включить Webpack-Plugin-Serve Модуль возле вершины dev.config.js Файл, где определены другие константы. При этом создайте новый экземпляр Herbel Ader, который содержит наши параметры Dev Server.

dev.config.js
...

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

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

Далее обновите module.exports следующим образом. Обратите внимание, что мы устанавливаем Режим и Смотреть Флаги здесь вместо нашего сценария NPM.

dev.config.js
...

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

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

Далее, в base.config.js , изменить inpit.app Значение свойства в массив, так что WebPack-Merge Обрабатывает это правильно, так как мы добавили inpit.app Собственность в dev.config.js на предыдущем шаге.

base.config.js
...

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

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

prod.config.js
...

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

Вот и все. Запустите Dev Build снова, на этот раз, используя обновленную конфигурацию.

npm run dev
Исходный код

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

Минимальный React, Webpack, Setup Babel: использование Webpack-Plugin-Serve -Ищете конфигурацию WebPack React Webpack, которая использует WebPack-Plugin-Serve? Похоже на вышесказанное, эта вилка Робин Виеруч Проект шаблона на GitHub был слегка изменен, чтобы также использовать новый Webpack-Plugin-Serve вместе с их Webpack-nano CLI замена. Исходный код на GitHub

Первоначально опубликовано в jimfrenette.com/2018/12/new-webpack-development-server-plugin

Оригинал: “https://dev.to/jimfrenette/new-webpack-development-server-plugin-512f”

Читайте ещё по теме: