webpack-dev-server от входа до реального боя

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

xr.png

Есть старая поговорка: «Если рабочий хочет хорошо выполнять свою работу, он должен сначала заточить свои инструменты». Создание удобной среды разработки для фронтенд-разработчика значительно повысит эффективность нашей работы по разработке. а такжеWebpackВ качестве незаменимого инструмента для интерфейсной инженерной упаковки сегодня многие люди не знают, какWebpack 4начали предлагатьDevServerФункция.

Давайте учиться вместе!

1 Что такое webpack-dev-сервер

DevServerдаWebpack 3Откройте экспериментальную функцию, используйтеwebpack-dev-middlewareПромежуточное ПО, предоставляющее сервер разработки с горячим обновлением, предназначено для того, чтобы помочь разработчикам быстро создать среду на этапе разработки.

до настоящего времениWebpack 5Также поддерживает обратный прокси, брандмауэр,Socket,gzipкомпрессия и др.

2 Конфигурация обратного прокси

а такжеNginxаналогичный,webpack-dev-serverКонфигурация прокси-сервера URL также выполняется путем регулярного сопоставления URL-адресов. Обычную настройку см. в следующем коде:

{
  "/rest/": {
    "target": "http://127.0.0.1:8080",
    "secure": false
  }
}

также с помощьюJavaScriptОпределите эту конфигурацию, чтобы проксировать несколько записей на одну и ту же цель. Установите файл конфигурации прокси наproxy.conf.js(заменятьproxy.conf.json) и укажите файл конфигурации в следующем примере.

module.exports = {
    //...
    devServer: {
        proxy: [
            {
                context: ['/auth', '/api'],
                target: 'http://localhost:3000',
            },
        ],
    },
};

2.1 Введение в основные элементы конфигурации

  • proxy:devServerконфигурация прокси
  • /api: Указывает URL-адрес запроса, который необходимо проксировать.
  • target: адрес обратного прокси
  • pathRewrite: Запрос перезаписи адреса, аналогичныйNginxизRewiteФункция

Другие письменные ссылки:

"pathRewrite": {
  "^/old/api": "/new/api"
}

 // remove path
pathRewrite: {
  '^/remove/api': ''
}

// add base path
pathRewrite: {
  '^/': '/basepath/'
}

// custom rewriting
pathRewrite: function (path, req) {
  return path.replace('/api', '/base/api');
}

// custom rewriting, returning Promise
pathRewrite: async function (path, req) {
  const should_add_something = await httpRequestToDecideSomething(path);
  if (should_add_something) path += 'something';
  return path;
}

2.2 Другие ссылки по конфигурации

  • logLevel: уровень печати журнала, поддержка['debug', 'info', 'warn', 'error', 'silent'],silentНе распечатывать журналы
  • logProvider: Пользовательское промежуточное ПО для печати журналов.
  • secure: закрыть лиhttpsсертификат безопасности
  • changeOrigin: изменить прокси-запросhost
  • protocolRewrite: переписать протокол,httpа такжеhttpsзапросить перевод
  • cookieDomainRewrite:ИсправлятьcookieDomainзначение
  • headers: Добавить конфигурацию заголовков ко всем запросам.
  • proxyTimeout: время ожидания запроса

2.3 Расширенный механизм прокси

  • onError: Обработать код состояния запроса
function onError(err, req, res, target) {
    res.writeHead(500, {
        'Content-Type': 'text/plain',
    });
    res.end('Something went wrong. And we are reporting a custom error message.');
}
  • onProxyRes: для прокси-интерфейсаResponseобработки, которая часто используется здесь для полученияcookie, перенаправление и т. д.
function onProxyRes(proxyRes, req, res) {
    proxyRes.headers['x-added'] = 'foobar'; // 添加一个header
    delete proxyRes.headers['x-removed']; // 删除一个header
}
  • onProxyReq: на прокси-интерфейсеrequestОбработка, выполняемая перед запросом, часто используется для установкиcookie,headerждать
function onProxyReq(proxyReq, req, res) {
    // add custom header to request
    proxyReq.setHeader('x-added', 'foobar');
    // or log the req
}

3 Конфигурация белого списка доменных имен

После настройки этой конфигурации только соответствующиеhostТолько адрес может получить доступ к службе, которая часто используется на этапе разработки для имитации сетевого брандмауэра для ограничения доступа к IP. Когда элемент конфигурации настроен какall, он пропуститhostпроверить, но не рекомендуется, т.к.DNSриск нападения.

  1. конфигурация элемента конфигурации веб-пакета
module.exports = {
  //...
  devServer: {
    allowedHosts: [
      'host.com',
      'subdomain.host.com',
      'subdomain2.host.com',
      'host2.com',
    ],
  },
};
  1. конфигурация команды запуска cli
npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

4-портовая конфигурация

  1. конфигурация элемента конфигурации веб-пакета
module.exports = {
  //...
  devServer: {
    port: 8080,
  },
};
  1. конфигурация команды запуска cli
   npx webpack serve --port 8080

5 Angular fight — REST-интерфейс прокси на локальный сервер через webpack devServer

В фреймворке Angular из-за инкапсуляции webpack файл конфигурации прокси по умолчанию использует proxy.config.json. (Файл конфигурации формата js необходимо изменить в файле конфигурации angular.json), вот пример proxy.config.json.

  1. Проксируйте все интерфейсы, начинающиеся с /rest/, на 127.0.0.1:8080 и измените адрес запроса /rest/ на /
{
  "/rest/": {
    "target": "http://127.0.0.1:8080",
    "secure": false,
    "pathRewrite": {
      "/rest/": "/"
    },
    "changeOrigin": true,
    "logLevel": "debug",
    "proxyTimeout": 3000
  }
}

Получите доступ к тестовому адресу запуска {{ host address}}/rest/testApi

  1. Добавьте заголовок cftk ко всем интерфейсам /rest/

Для этого необходимо использовать файл конфигурации прокси в формате js, изменить proxyConfig в angular.json на proxy.config.js и добавить следующее содержимое в proxy.config.js:

const PROXY_CONFIG = [
    {
        "target": "http://127.0.0.1:8080",
        "secure": false,
        "pathRewrite": {
            "/rest/": "/"
        },
        "changeOrigin": true,
        "logLevel": "debug",
        "proxyTimeout": 3000,
        "onProxyReq": (request, req, res) => {
            request.setHeader('cftk', 'my cftk');
        }
    },
];
module.exports = PROXY_CONFIG;

6 Сравнение webpack-dev-server и nginx

       webpack-dev-server    nginx
сцены, которые будут использоваться местное развитие полная сцена
поддержка сети  https/http/http2/ws  https/http/http2/ws/ftp и т. д.
Способ загрузки После компиляции кода и загрузки его в память производительность лучше.Его можно комбинировать с webpack для горячего обновления.Когда проект большой, он будет занимать слишком много памяти. Чтение содержимого жесткого диска, подходит для больших проектов
поддержка gzip служба поддержки служба поддержки
нить один поток Многопоточность
Переадресация прокси не поддерживается служба поддержки
обратный прокси служба поддержки Поддержка, более мощный
служба поддержки Единая точка поддержки Поддержка нескольких сервисов, балансировка нагрузки
Трудно начать легкий трудный
Суммировать Он очень подходит для локального состояния разработки, при котором код считывается в память, производительность выше, время компиляции после каждого изменения сокращается, стоимость обучения низкая, а другие сторонние плагины не нужны. требуется в некоторых сценариях аутентификации. Можно получить такую ​​информацию, как файлы cookie, что более удобно для разработчиков. Однако из-за компиляции и привязки прокси стоимость изменения конфигурации каждый раз относительно велика. Decathlon — очень хороший сервер с очень мощными функциями, но конфигурация также сложна и требует определенных затрат на обучение.Локальная совместная отладка требует помощи подключаемых модулей браузера для получения информации о браузере, такой как файлы cookie.Поддержка файлов конфигурации включает в себя затраты на командное общение
Категории