Как подключить несколько html файлов webpack

Обновлено: 05.07.2024

Webpack-merge нужен чтобы отделять билд и дев разработку. Это нужно делать обязательно. Иначе рано или поздно случиться то, что иллюстрировано на гифке выше. Самый банальный пример - сжатие картинок, если мы будем сжимать их при dev разработки вебпак будет значительно дольше собирать наш проект это нужно делать только при build разработке. Поэтому очень важно разделять эти 2 этапа.

Теперь создадим 3 файла конфигураций:

  1. webpack.base.conf.js - базовый для мерджа
  2. webpack.build.conf.js - конфигурации для билда
  3. webpack.dev.conf.js - конфигурации для дева

В исходном файле package.json обновим ярлык dev и build:

webpack.base.conf.js будет выглядеть так:

В build мы укажем mode: 'production’, который мы удалили из ярлыков в package.json . Также объявим webpack-merge в константу merge.

Таким образом webpack.build.conf.js выглядит так:

В dev мы укажем mode: ‘development’, который мы точно также удалили из ярлыков в package.json .

Также объявим webpack-merge в константу merge . Добавим порт 8081 и настроим overlay.

Таким образом webpack.build.conf.js выглядит так:

Webpack devtool - карта для нашего CSS

Webpack devtool пригодиться чтобы чтобы подключить карту для CSS файлов. Посколько мы используем SASS нельзя просто так написать:

Потому что в таком случае у нас не будет работать вложенные sass модули в в файл main.scss.

Для того чтобы import ‘./example.scss’

Отображался корректно объявим вебпак в константу. Обратимся к вебпаку чтобы вытащить палагин SourceMapDevToolPlugin . Выглядеть это будет так:

Здесь не обязательно создавать саму карту или же делать ярлык на который ссылается file. Теперь, если запустить дев разработку можно увидеть что на каждую строчку css кода выводится корректный scss файл!

Webpack обработка изображений. Подключаем file-loader

Чтобы обработать картинки в Webpack е. нам нужно поставить обработчик для наших img файлов. Для этого установим пакет file-loader`.

Далее в базовом файле конфигураций:

Теперь мы можем вставлять файлы без ошибок, но что делать с копированием этих изображений?

Устновка и настройка copy-webpack-plugin

Давайте установим и настроим сopy-webpack-plugin в сборку webpack. С помощь этого плагина мы будем копировать наши изображения и статичные файлы из dev в build. Чтобы в последующем мы могли к ним обращаться.

Обратимся к плагину

Вот и все, теперь наши файлы копируются и мы можем обращаться к ним через dist

Установка и настройка html-webpack-plugin в webpack 4

Этот плагин нам понадобиться чтобы избавиться от index.html в корне проекта и перенести его в папку src и в дальнейшем скопировать его в dist.

Чтобы установить плагин html-webpack-plugin в консоли пропишем:

В основном файле конфига напишем, что и куда должен копировать webpack 4:

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

localhost: 8181 -> обслуживает index.html
localhost: 8181 / example.html -> обслуживает example.html

Я пытаюсь сделать это, установив несколько точек входа, следуя документации :

Кто-нибудь знает, что я делаю не так?

Вы можете найти для этого решение? Я также ищу такой же вариант использования.

Считайте точку входа корнем дерева, которое ссылается на многие другие ресурсы, такие как модули 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 . Особенно актуально для вашего варианта использования:

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

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

webpack-react-multi-page

Webpack широко используется в одностраничной упаковке. Существует множество платформ, возглавляемых create-реагировать-app. Под одностраничной упаковкой обычно понимается упаковка бизнес-файлов js и css в один и тот же HTML-файл. Весь проект содержит только одну запись HTML-файла, ноМногие компании нуждаются в нескольких страницах с разными входами, такими как различные мероприятия h5, или для поддержки официального веб-сайта seo, все требуют нескольких разных HTML。webpack-react-multi-pageАрхитектура позволяет разрабатывать проекты на нескольких страницахАвтоматически упакуйте вновь созданные страницы и убедитесь, что каждая страница может быть оперативно обновлена , Существует четкая иерархия файлов после сборки пакета.

обзор

собственности

  • ? Поддерживает многостраничную одновременную разработку с горячей загрузкой
  • ? Автоматически идентифицировать вновь созданные страницы
  • ? Каждая страница генерирует персонализированную информацию
  • ? Классификация и упаковка
  • ? Гибкое расширение

Установить и использовать

Недавно созданная страница добавить папку под src и создать pageinfo.json тогда npm run dev к

Архитектура проекта

Техническое использование

  • react16
  • webpack4
    • html-webpack-plugin генерирует html-файлы
    • mini-css-extract-plugin css отдельная упаковка
    • сжатие js uglifyjs-webpack-plugin
    • optimize-css-assets-webpack-plugin css сжатие
    • открытый браузер
    • сжатие Включите сжатие GZIP
    • express
    • fs

    Структура каталогов

    одностраничное приложение для пакета webpack

    Webpack широко используется в одностраничной упаковке, и существует множество контактных платформ, управляемых create-реагировать-app. Под одностраничной упаковкой обычно подразумевается упаковка бизнес-файлов js и css в один и тот же HTML-файл, и весь проект имеет только одну запись HTML-файла.

    Конфигурация одностраничной упаковки Webpack

    Так что вы можете dist Файл, подобный следующему, упакован в папку

    Конфигурация многостраничной упаковки Webpack

    Запись в веб-пакете поддерживает два формата

    Упаковать один файл

    Это упакует bundle.js под dist

    Упаковать несколько файлов

    Выше два js-файла, соответствующих имени атрибута записи, упакованы в dist

    Смонтируйте каждый js в соответствующий html файл

    Здесь нам нужно использовать html-webpack-plugin Для этого плагина webpack каждый раз, когда вы добавляете страницу, вам нужно добавить плагин new HtmlWebpackPlugin(<. >)

    html-webpack-plugin Пройдет template.html Шаблон генерирует HTML-файл с соответствующим именем файла и упаковывает его в соответствующую папку в выходных данных. Обратите внимание, что все упакованные файлы соответствуют выходным данным без специальной настройки. path Этот каталог также включает в себя HTML. здесь chunks Следует отметить, что он должен определить, какой js должен вводить html. Если он не записан, все упакованные js будут экспортированы по умолчанию. Конечно, это не то, что нам нужно.

    Приведенная выше конфигурация может, наконец, упаковать следующую файловую структуру в dist

    Благодаря вышеупомянутой конфигурации, плюс devServer, мы уже можем добиться разработки многостраничной конфигурации, но это очень неразумно, потому что каждый раз, когда вы добавляете страницу, вы должны настроить ее в обратном порядке, это будет очень громоздким, поэтому мы приходим При оптимизации давайте сосредоточимся только на странице разработки и оставим конфигурацию для веб-пакета.

    оптимизация многостраничной конфигурации webpack

    Давайте посмотрим на структуру файла под src

    Каждая папка в src соответствует бизнесу js html-страницы.Если мы непосредственно найдем папку, соответствующую записи js, и объединим их для создания соответствующей записи, не будет ли необходимости писать запись вручную, да!

    Пройдите по каталогу файлов

    Например, под src есть элемент страницы индекса, а результатом прохождения элемента about является ["index", "about"];

    Траверс для создания упакованного массива записей

    Здесь мы используем массив, полученный getFilepath, получаем файлы js в каждом каталоге и объединяем их в файл ввода js следующего объекта формата.

    Используйте getEntry в веб-пакете

    Таким образом, мы автоматически получаем запись

    Автоматическая настройка html-webpack-plugin

    Поскольку каждая страница должна настраивать html, а заголовок, ключевые слова, описание и другая информация на каждой странице могут отличаться, поэтому мы создаем pageinfo.json в каждой папке страницы, поэтому получаем информацию в json через модуль fs. Перейдите к соответствующему html-webpack-plugin для создания массива html plugin.

    index/pageinfo.json генерировать index.html Информация о странице

    about/pageinfo.json генерировать about.html Информация о странице для

    Чтение и генерация массива HtmlWebpackPlugin через fs-обход для веб-пакета

    Обойти массив плагинов html

    Конечная конфигурация wbpack

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

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

    localhost: 8181 -> обслуживает index.html
    localhost: 8181 /example.html -> обслуживает example.html

    Я пытаюсь сделать это, задав несколько точек входа, следуя документации :

    Кто-нибудь знает, что я делаю не так?

    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 . Особенно актуально для вашего случая использования:

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

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

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

    Я пытаюсь сделать это, установив несколько точек входа, следуя документации:

    Кто-нибудь знает, что я делаю неправильно?

    ОТВЕТЫ

    Ответ 1

    См. точку входа в качестве корня дерева, которая ссылается на многие другие активы, такие как модули 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. Особенно важно для вашего случая использования:

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

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

    Читайте также: