Вопросы Теги

Как настроить сервер webpack dev для не-SPA? [Дубликат]

Нашли сравнение двух методов (строка запроса vs имя файла) здесь :

Версия в виде запроса имеет две проблемы.

Во-первых, он не всегда может быть браузером, который реализует кеширование, через которое мы должны разрушить. Говорят, что некоторые (возможно, более старые) прокси игнорируют запрос в отношении поведения кэширования.

Во-вторых, в некоторых более сложных сценариях развертывания, где у вас есть несколько интерфейсных и / или множественных серверных серверов, обновление - это не что иное, как мгновенное. Вы должны одновременно использовать как старую, так и новую версию своих активов. См. Например, как это влияет на вас при использовании Google App Engine.

24
задан miguelitomp 2 October 2016 в 10:32
поделиться

2 ответа

См. точку входа в качестве корня дерева, которая ссылается на многие другие активы, такие как модули javascript, изображения, шаблоны и т. д. Когда вы определяете более одной точки входа, вы в основном разделяете свои активы на так называемые куски, чтобы не иметь весь свой код и активы в одном пакете.

То, что я думаю, вы хотите достичь, - это иметь более одного «index.html» для разных приложений, которые также относятся к различным фрагментам ваших активов, которые вы уже определили с вашими точками входа.

Копирование файла index.html или даже создание ссылки со ссылками на эти точки входа не обрабатывается по механизму входа - это наоборот. Основной подход для обработки html-страниц - использование файла html-webpack-plugin, который не только может копировать html-файлы, но также имеет обширный механизм для шаблонов. Это особенно полезно, если вы хотите, чтобы ваши пакеты были суффиксными с хэшем пакетов, что очень помогает избежать проблем с кешированием браузера при обновлении вашего приложения.

Как вы определили шаблон имени как [id].bundle_[chunkhash].js, вы можете больше не ссылайтесь на свой пакет javascript как main.bundle.js, так как он будет называться как main.bundle_73efb6da.js.

Посмотрите на html-webpack-plugin . Особенно важно для вашего случая использования:

Вероятно, у вас должно быть что-то подобное в конце (предупреждение: не проверено) 

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'src/index.html',
    chunks: ['main']
  }),
  new HtmlWebpackPlugin({
    filename: 'example.html',
    template: 'src/example.html',
    chunks: ['exampleEntry']
  })
]

Обратите внимание, чтобы ссылаться на имя точки входа в массиве chunks, поэтому в вашем примере это должно быть exampleEntry. Вероятно, это также хорошая идея переместить ваши шаблоны в определенную папку вместо их непосредственно внутри корневой папки src.

Надеюсь, это поможет.

41
ответ дан Andreas Jägle 15 August 2018 в 23:02
поделиться
  • 1
    Спасибо! Не удалось найти ответ в другом месте, и я искал часы. – TK123 31 July 2018 в 19:09

Вы также можете использовать Copy Webpack Plugin , если вам не нужны две разные сборки, т. е. предполагается, что вы просто хотите использовать другой HTML с тем же main.bundle.js.

Плагин действительно мертв (проверен только в webpack v4): 

const CopyWebpackPlugin = require('copy-webpack-plugin');

const config = {
  plugins: [
    new CopyWebpackPlugin([
      { from: './src/example.html', to: './example.html' }
    ])
  ]
}

Затем в example.html вы можете загрузить сборку с index.html. Например ::

<!DOCTYPE html>
<html
<head>
    ...
    <title>Example</title>
</head>
<body>
    <div id="container"> Show an example </div>
    <script src="main.bundle.js"></script>
</body>
</html>
0
ответ дан F Lekschas 15 August 2018 в 23:02
поделиться
  • 1
    есть ли другой способ использования CopyWebpackPlugin и добавить файл bundle.js в html-файл через webpack вместо того, чтобы напрямую давать ссылку на скрипт в самом файле html? – Sritam Jagadev 24 July 2018 в 11:02
Другие вопросы по тегам:

Похожие вопросы: