WebPack-dev-сервер (3.6.0): что я хотел бы знать

Автор оригинала: Nicholas Arthur.

Я склонен расстраиваться при отладке проблем конфигурации. Это приводит ко мне делать глупые ошибки и случайные параметры конфигурации конфигурации конфигурации, надеясь, что один из них палочки. Я решил сломать цикл и попытаться понять, что происходит. Я ссылаюсь на WebPack-Dev-Server в качестве WDS для этой статьи.

Во-первых, 3 больших вещей, которые нужно знать:

WDS не автоматиз автоматиз, если вы измените файлы конфигурации. Итак, если вы меняете вещи, и ничего не меняется, это наблюдение правильное.
WDS не просто компилируйте ваш пакет, а затем обслуживает его из файлов. Скорее, он держит ваш пакет в памяти. Это означает, что если вы пытаетесь выяснить, где собираются ваши скомпилированные файлы, вы не увидите их в каталоге. Чтобы увидеть, куда они идут, иди к localhost: 8080/WebPack-Dev-Server Отказ
Ничто не меняется, даже если вы можете загрузить свой сайт, и компиляция успешна? Есть хороший шанс, что вы на самом деле обслуживаете ваши файлы Bundle Bundle.

Если вы отладки конфигурации WDS WDS, удалите встроенные файлы WebPack. Таким образом, если ваш конфигурация WDS запутается, вы не получите никаких ложных срабатываний. Уловий является, после получения правильных WDS вы должны убедиться, что ваши встроенные файлы идут на правильное место.

Документы слишком расплывчаты? Прочитайте код.

Когда я постоянно расстроен чем-то вроде этого, я пытаюсь заставить себя понимать его на более глубоком уровне. Таким образом, к источнику.

Самым запутанным для меня выясняется, где WDS рассматривает ваш файл (так как вы не можете просто посмотреть на каталог), и как это отличается от обычной сборки.

Есть эта странная страница, которую WDS дает вам, что эффективно показывает вам список каталога ваших созданных файлов.

app.get('/webpack-dev-server', (req, res) => {
  res.setHeader('Content-Type', 'text/html');
  res.write('
');
  const outputPath = this.middleware.getFilenameFromUrl(options.publicPath || '/');
  const filesystem = this.middleware.fileSystem;
 
 
  function writeDirectory(baseUrl, basePath) {
    const content = filesystem.readdirSync(basePath);
    res.write('');
    content.forEach((item) => {
      const p = `${basePath}/${item}`;
      if (filesystem.statSync(p).isFile()) {
        res.write('');
        res.write(item);
        res.write('');
        if (/\.js$/.test(item)) {
          const htmlItem = item.substr(0, item.length - 3);
          res.write('');
          res.write(htmlItem);
          res.write(' (magic html for ');
          res.write(item);
          res.write(') (webpack-dev-server)');
        }
      } else {
        res.write('');
        res.write(item);
        res.write('
');
        writeDirectory(`${baseUrl + item}/`, p);
        res.write('');
      }
    });
    res.write('');
  }
  writeDirectory(options.publicPath || '/', outputPath);
  res.end('');
});

Признаюсь, я на самом деле не знаю, что должен делать волшебный HTML из строк 19-29, но для этого не стоит понимать. Кажется, будет способ, чтобы ваше приложение завернуто в какой-то HTML, который говорит вам, когда WDS перезагружается и такой. Это не работает для меня, потому что моя маршрутизация настроена

Это то, что делает для меня в localhost: 8080/WebPack-Dev-Server Отказ

Похоже, это файлы, которые обслуживают WebPack – вы можете сказать, что моя настройка здесь запутана. Все должно быть в расстрелам. Но не должен быть корнем.

Бизнес этого маршрута кажется asuitedirectory Функция, которая берет BaseUrl и Базопат Отказ Внизу мы видим, что reaniedirectory называется PercingPath и Productspath , соответственно. Эта функция получает список файлов на Базопат И итерации над ними рекурсивно вызывая себя, если один из этих файлов на самом деле является другим каталогом.

Этот бит кода показывает, как пути WDS на самом деле работает, в частности, отношения между Productspath и PercingPath Отказ Во-первых, некоторые соответствующие биты моего конфигурации:

output: {
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'dist'
},
plugins: [
   new HtmlWebpackPlugin({
   template: 'public/indexTemplate.html',
   filename: 'dist/index.html'
   favicon: 'favicon.ico'
 })
],
devServer: {
  historyApiFallback: {
    index:'index.html',
    rewrites: [
      { from: /list\/*/, to: 'index.html' }
    ]
  },
  https: false,
  publicPath: '/dist/'
}

Очевидно, что этот конфиг немного запутался, но я приехал сюда из более разумного рабочего конфига. Вы можете видеть, что я использую HTML-Webpack-Plugin, который начнет все это путаницу, потому что это означало, что мне нужно было получить мой индекс из отвала вместо общественности.

Давайте снова посмотрим на оказанную страницу:

Эта первая ссылка, мой пакет, на самом деле указывает на http://localhost: 8080/dist/da2c93b562075b4cbd7a.js Как …| Dist достичь цели? Хорошо..

res.write('');
res.write(item);
res.write('');

BaseUrl (Помните, это PublicPath ) добавляется в URL, но не в тексте. Если я нажму эту ссылку, там на самом деле. Похоже, это имеет смысл, хотя если PercingPath был '/' вместо /dist/ Это означает, что пакет будет построен на dist/bundle.js Но доступен в WDS в localhost: 8080/bundle.js Отказ

Исправление конфигурации

Худшая часть этого конфига, в том, что я использовал Имя файла: 'dist/index.html для html-webpack-plugin конфигурация Это означает, что файл на самом деле доступен в localhost: 8080/dist/dist/index.html Отказ Это может быть особенно запутано, если вы играете с конфигурацией. Как с PartyPath: '/' у тебя будет index.html доступен в localhost: 8080/dist/dist.html , который почти имеет смысл.

Итак, мы удаляем Dist от html-webpack-plugin Имя файла потому что Productspath уже положит в Dist/ Отказ С этим изменением я могу теперь получить доступ к моим построенным index.html на localhost: 8080/dist/dist.html , что еще не то, что я хочу.

Я действительно хочу, чтобы это было в / Отказ Но если мы вспомним эту строку, где создается ссылка:

res.write(baseUrl + item)

Знание BaseUrl действительно PercingPath Единственный способ, которым это может произойти, это если WDS PercingPath это / Отказ

Успех! Или, вроде. Теперь я получаю index.html Просто собираюсь localhost: 8080/ (который будет запросить index.html Поскольку index имеет магические свойства). Тем не мение..

Черт возьми

html-webpack-plugin генерирует URL к расслоению, но он включает Dist В URL, почему?

Ну, оказывается, я только изменил PercingPath в WDS. Это должно быть / в обоих случаях. Спаси себя беда и не устанавливайте PercingPath В вашем конфиге WDS.

Спа-беды

Хорошо, теперь мы вернемся к проблеме, которая привела меня, чтобы изменить все в первую очередь. Когда я перепишу на другую страницу и обновить, я получаю 404 Из-за того, что это одностраничное приложение (SPA). Я бы настроил правила повторной маршрутизации, но кажется, что они не работают.

historyApiFallback: {
  index:'index.html',
  rewrites: [
    { from: /list\/*/, to: 'index.html' }
  ]
}

При запуске WDS, это полезно сообщает нам о следующем:

Хорошо, так что если вывод исходит от / и 404 Свернуться до index.html тогда, когда я 404 на localhost: 8080/Список/1/1 Это должно повторно написать на localhost: 8080/index.html , который верит нагрузки на страницу. Так что здесь что-то происходит, что не очевидно из данных.

index: 'index.html'

Что не так с этим? Это относительный путь. Относительный, к любому URL-адресу, на котором вы в настоящее время. Итак, когда 404 для localhost: 8080/Список/1/1 возникает, мы на самом деле загрузка localhost: 8080/Список/1/index.html Отказ Это действительно не было очевидно для меня. Худшая часть? Если вы посмотрите на запрос на вкладке «Сетевой», вы не видите эту попытку повторной маршрутизации запроса.

Одна последняя Готча

Теперь, когда PercingPath это / , html-webpack-plugin будет генерировать это в вашем index.html :

Ваш пакет построен на Dist Из-за Productspath Отказ html-webpack-plugin Рассказывает браузеру искать его на / Из-за PercingPath Отказ Как справиться с этим? Либо запустите свой сервер в Dist (кажется, имеет смысл) или использовать другой PercingPath В вашем PROD WebPack Config.

Вам решать.

Это столько боли на учебника, так как я могу призвать на данный момент. Если вы найдете все, что можно было бы улучшить об этом, я был бы более чем рад слышать это.

Наконец, если вам нужен внештатный разработчик, я на рынке для работы. Я специализируюсь на современном интерфейне Web DEV, используя последние технологии. Я также расчесываю свои навыки полной стопки и пытаюсь помочь подключить рок-альпинисты с моим веб-приложением letsclimbstuff.com Отказ

Вы можете связаться со мной в Narthur157@gmail.com или на моем профиле кодамента.

Во-первых, 3 больших вещей, которые нужно знать:

Документы слишком расплывчаты? Прочитайте код.

Исправление конфигурации

Спа-беды

Одна последняя Готча

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