Влияние HtmlWebpackPlugin на сервер разработчика webpack

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

Допустим, у меня следующая структура каталогов:

myproj/
  |- package.json
  |- webpack.config.js
  |- src/
    |- index.html
    |- index.jsx

и файл webpack.config.js, который выглядит так:

const path = require('path');

module.exports = {
    entry: './src/index.jsx',

    devServer: {
        contentBase: __dirname
    }
};

Затем я запускаю webpack-dev-server --mode=development. Поскольку у меня devServer.contentBase установлен в текущий каталог (myproj), а файл index.html находится внутри myproj/src, я должен перейти к http://localhost:8080/src/index.html, чтобы увидеть свое веб-приложение. Если я попробую просмотреть http://localhost:8080/index.html, то получу 404. Для меня это имеет смысл.

Затем я добавляю HtmlWebpackPlugin, ничего не меняя внутри webpack.config.js:

const HtmlWebpackPlugin = require('html-webpack-plugin');
....
plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html'
    })
]

Теперь я могу сразу перейти к http: // локальный: 8080 / index.html. Фактически, я могу поразить либо http://localhost:8080/index.html, либо http://localhost:8080/src/index.html.

Что с этим? Что сделал HtmlWebpackPlugin, чтобы это стало возможным?

он создает html-файл для вас на root. Возможно, у вас есть еще один index.html внутри src, который загружается во втором корпусе.

— 23.04.2018 16:44

@Prajwal спасибо за информацию. Полагаю, как и файл bundle.js, этот файл index.html существует только в памяти? Я не вижу, чтобы это где-нибудь записывалось на диск.

— 23.04.2018 23:33

webpack webpack-dev-server html-webpack-plugin

23.04.2018 16:40

Поиск всех неиспользуемых файлов в проекте

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

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

6 686

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

Ответы 3

Как вы заметили, когда вы запускаете webpack-dev-server, все файлы вывода веб-пакета (включая стили, сценарии и служебные рабочие) будут загружаться только из памяти. Это не приведет к записи файлов в настроенный выходной каталог.

Из документов Webpack-dev-сервер,

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same URL path, the bundle in memory takes precedence (by default).

24.04.2018 05:07

у вас есть доступ как к http: // локальный: 8080 / index.html, так и к http: // локальный: 8080 / src / index.html. Но обслуживаются по-разному.

Для http: // локальный: 8080 / src / index.html он обслуживается webpack-dev-сервером точно так же, как если HtmlWebpackPlugin не включен. Если вы проверите содержимое ответа этого URL-адреса, вы обнаружите, что оно идентично содержимому src / index.html на вашем диске.

Для http: // локальный: 8080 / index.html он обслуживается HtmlWebpackPlugin из памяти. Если вы проверите содержимое ответа этого URL-адреса, вы обнаружите, что весь ваш файл пакета добавлен в HTML (поэтому мы его используем). Для имени файла вы можете настроить его как угодно с помощью поля «имя файла» (вы также можете указать подкаталог). проверьте https://github.com/jantimon/html-webpack-plugin#options для более подробной информации.

24.04.2018 13:53

Ответ принят как подходящий

Ладно, думаю, я понял это.

TL; DR

После добавления HtmlWebpackPlugin вы должны удалить эту строку из index.html:

<script type = "text/javascript" src = "main.bundle.js"></script>

и переходите только к http://localhost:8080/index.html.

Утомительные подробности:

После добавления HtmlWebpackPlugin он берет ваш файл index.html и объединяет его в тег <script>, указывающий на ваш пакет веб-пакетов. Он обслуживает этот объединенный HTML-файл с http://localhost:8080. Это происходит, даже если index.html уже содержит ссылку на комплект.

Плагин фактически не перезаписывает index.html объединенной версией. Таким образом, переход к http://localhost:8080/src/index.html просто показывает вам этот файл в том виде, в каком он находится на диске.

Итак, если ваш файл src/index.html выглядит как перед, вы добавляете HtmlWebpackPlugin:

<body>
    <div id = "app">it worked</div>
    <script type = "text/javascript" src = "main.bundle.js"></script>
</body>

затем после вы добавляете HtmlWebpackPlugin, переход к http://localhost:8080 дает вам эту объединенную версию:

<body>
    <div id = "app">it worked</div>
    <script type = "text/javascript" src = "main.bundle.js"></script>
    <script type = "text/javascript" src = "main.bundle.js"></script>
</body>

Итак, теперь у вас будет две ссылки на пакет: одна, которую вы добавили в файл, и одна, добавленная HtmlWebpackPlugin.

Просмотр http://localhost:8080/src дает вам то, что находится на диске в src/index.html:

<body>
    <div id = "app">it worked</div>
    <script type = "text/javascript" src = "main.bundle.js"></script>
</body>

Однако, поскольку весь смысл использования HtmlWebpackPlugin заключается в том, чтобы позволить ему вставить ссылку на комплект для вас, это означает, что вы должны удалить этот тег <script> из src/index.html. Это, в свою очередь, означает, что просмотр src/index.html больше не будет работать, потому что у вас больше нет ссылки на ваш пакет!

Теперь вы полагаетесь на то, чтобы позволить HtmlWepbackPlugin вставить тег <script> за вас, что означает, что теперь вы должны открыть http://localhost:8080/index.html в браузере, чтобы получить сгенерированную им версию.

Webpack. Быть. Сумасшедший.

25.04.2018 04:26