webpack-dev-server на самом деле не сложный

внешний интерфейс Webpack

Оригинальная ссылка

Обзор

Мы все знаем, что веб-пакет — это инструмент для сборки, но в процессе разработки и тестирования мы часто изменяем код, а затем часто обновляем страницу, чтобы увидеть эффект.К сожалению, мы из тех, кто устал от старых и повторяющихся работай.

Просто webpack этот инструмент, предоставляет другой инструмент --webpack-dev-server, он может помочь нам выйти из этого.

Первая попытка - файл JS для отслеживания записи

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

Способ использования webpack-dev-server прост:

  1. Установить:npm install --save-dev webpack-dev-server
  2. Затем установите корневой каталог сервера, который по умолчанию является корневым каталогом проекта:
devServer: {
  contentBase: './dist',
}
  1. затем используйте командуwebpack-dev-server --openВот и все. Вы также можете поставить эту директиву в поле сценариев в файле Package.js.

Фундаментальный

По сути, это запустить сервер с Express, а затем настроить два выхода маршрутизации:

  1. Экспорт статических ресурсов: может передавать поле devServercontentBaseУстановить каталог статических ресурсов
  2. экспорт вывода webpack: по умолчанию/, доступ к которому можно получить через поле devServerpublicPathнастраивать

Итак, я вижу, что вывод веб-пакета на самом деле является объектом маршрутизатора Express, веб-пакет наблюдает за связанными файлами в соответствии с файлом входа, и когда они изменяются, перекомпилирует и упаковывает и выводит объект маршрутизатора, чтобы мы могли получить доступ. Маршрутизатор получает последний ресурс, но этот ресурс размещается в памяти, а не в файловой системе.

Веб-страница и сервер webpack-dev связаны между собой через протокол websocket. Когда изменение файла отслеживается, веб-сокет уведомляет веб-страницу о вызове интерфейса перезагрузки для обновления страницы.

Обновить - слушать статические файлы HTML

Прислушивайтесь к изменениям в статических файлах и обновляйте их.

шаг:

  1. Установите html-webpack-плагин:npm i -D html-webpack-plugin
  2. Установите необработанный загрузчик:npm i -D raw-loader
  3. Настройте плагин и загрузчик в файле конфигурации:
module.exports = {
  mode: 'development',
  entry: './index.js',
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: "./dist/index.html" // 指定HTML模板的路径
    })
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'raw-loader'
      }
    ]
  }
}
  1. Затем укажите ссылку на этот HTML-шаблон в файле ввода index.js:require('./dist/index.html')
  2. Запустите службу:webpack-dev-server, обновите этот index.html, чтобы увидеть обновление

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

дефект: Каждый статический файл HTML необходимо настроить в файле конфигурации.HtmlWebpackPlugin.

Используйте gulp для прослушивания статических файлов

Использование gulp также является хорошим выбором, если мы просто хотим просто прослушивать изменения в статических файлах и позволять браузеру обновляться.

  1. Установите необходимые плагины:npm i -D gulp browser-sync run-sequence
  2. Затем укажите прослушиваемый файл в gulpfile.js:
var gulp = require('gulp'),
  browserSync = require('browser-sync'),
  runSequence = require('run-sequence');

gulp.task('browserSync', function () {
  browserSync.init({
    server: {
      baseDir: './dist' // 指定服务器的根目录，默认为项目的根目录
    }
  })
});

gulp.task('watch', ['browserSync'], function () {
  gulp.watch('./static/**/*.css', browserSync.reload); // 指定监听css文件
  gulp.watch('./static/**/*.js', browserSync.reload); // 指定监听js文件
  gulp.watch('./dist/*.html', browserSync.reload); // 指定监听html文件
});

gulp.task('default', function (callback) {
  runSequence(['browserSync', 'watch'], callback);
});

Объясните два основных поля выше:server.baseDirИспользуется для указания корневого каталога проекта,gulp.watch()Первый параметр относится к пути к файлу прослушивания, который необходимо изменить в соответствии с вашей собственной ситуацией при его использовании.

  1. окончательное исполнениеgulpТы сможешь. Если терминал подсказывает, что команда не может быть найдена, вы можете установить глобальный глоток или добавить префикс.\node_modules\.bin\gulpили добавьте скрипт в package.js"gulp": "gulp"затем используйте командуnpm run gulp.

Дополнительно — Замена горячего модуля

Функция горячей замены тоже не такая уж волшебная.

Одним словом, это мониторинг файла через API, предоставляемый webpack, и замена существующего модуля — для этого разработчик должен предоставить логику замены.

шаг:

  1. Чтобы включить горячую замену:devServer: true
  2. Зарегистрируйте два плагина:new webpack.NamedModulesPlugin()а такжеnew webpack.HotModuleReplacementPlugin()
  3. В файле, который необходимо отслеживать, используйте логику для установки условий, требующих горячей замены, и предоставьте логику горячей замены.

Функция прокси

Проксирование определенных URL-адресов может быть полезно, если у вас есть отдельный API-интерфейс внутреннего сервера разработки и вы хотите отправлять запросы API под тем же доменным именем.

Например, в конфигурационном файле установить:

proxy: {
  "/api": "http://localhost:3000"
}

Запросы к /api/users теперь будут проксироваться в запросыhttp://localhost:3000/api/users.

Для нескольких прокси-интерфейсов:

proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

Общая конфигурация

devServer.compress，启用gzip压缩。
devServer.contentBase，告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。
devServer.host，指定host。使用0.0.0.0可以让局域网内可访问。
devServer.hot，启用 webpack 的模块热替换特性（Hot Module Replacement）。
devServer.hotOnly，构建失败的时候是否不允许回退到使用刷新网页。
devServer.inline，模式切换。默认为内联模式，使用false切换到iframe模式。
devServer.open，启动webpack-dev-server后是否使用浏览器打开首页。
devServer.overlay，是否允许使用全屏覆盖的方式显示编译错误。默认不允许
devServer.port，监听端口号。默认8080。
devServer.proxy，代理，对于另外有单独的后端开发服务器API来说比较适合。
devServer.publicPath，设置内存中的打包文件的输出目录。区别于output.publicPath。

Ссылаться на

Как использовать webpack-dev-server, приходите ко мне, если не можете прочитать~ Сервер разработки (devServer) Extra - Make your HTML hot reload gulp+browser-sync отслеживает файлы для автоматического обновления браузера

Категории