Google webpack response, и вы заметите, что все руководства в верхних результатах имеют одну общую черту: они создают собственные шаблоны HTML для своих приложений React.

Видите ли, приложениям React нужен корневой узел, который служит точкой монтирования при рендеринге в DOM, поэтому в большинстве случаев вы просто увидите <div> с идентификатором root внутри базовой HTML-страницы и ничего другого в файле.

// main.js
ReactDOM.render(<h1>Hai!</h1>, document.getElementById('root'));
// index.html
...nothing unique...
<div id=”root”></div>
...nothing unique...

Почему это плохо?

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

Есть способ лучше!

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

Меньше:

// index.html
...cookiecutter...
<script async src="...googletagmanager.com/gtag/js..."></script>
...cookiecutter...
<div id=”root”></div>
...cookiecutter...

И еще:

// partials/body.html
<div id=”root”></div>
// partials/analytics.html
<script async src="...googletagmanager.com/gtag/js..."></script>
// path/to/output.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script async src="...googletagmanager.com/gtag/js..."></script>
    <title>Webpack App</title>
  </head>
  <body>
  <div id="root"></div><script type="text/javascript" src="main.js"></script></body>
</html>

Это избавляет от необходимости создавать ваш стандартный index.html, и пусть Webpack сделает всю работу за вас сейчас и в будущем.

Как добавить эти частички?

Предполагается, что у вас уже настроено базовое приложение React. Для получения дополнительной информации о том, как создать приложение React Webpack с нуля, попробуйте один из этих лучших результатов в Google.

Поехали! Начнем с добавления нашей зависимости:

yarn add html-webpack-partials-plugin -D
or
npm add html-webpack-partials-plugin --save-dev

Создайте свой партиал:

// path/to/partials/body.html
<div id=”root”></div>

Требовать новую установленную зависимость в верхней части конфигурации Webpack:

// webpack.config.js
const HtmlWebpackPartialsPlugin = require(‘html-webpack-partials-plugin’);

Добавьте частичную конфигурацию в любое место после HTML Webpack Plugin в списке плагинов:

// webpack.config.js
new HtmlWebpackPlugin(),
new HtmlWebpackPartialsPlugin({
 path: ‘./path/to/partials/body.html’
})

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

// webpack.config.js
plugins: [
  ..
  new HtmlWebPackPlugin({
    // template: “./path/to/index.html”,
    // filename: “index.html”
  }),
  ...
]

Предполагая, что в вашем index.html файле нет ничего важного, теперь вы можете запустить сценарий сборки Webpack, и все готово!

А что насчет других вещей в моем шаблоне?

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

Допустим, у вас есть сценарий аналитики, который вам крайне необходимо добавить прямо на страницу:

// path/to/index.html
<!DOCTYPE html>
<html>
<head>
  
  <meta charset=”utf-8">
  
  <script>
  (function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,’script’,’https://www.google-analytics.com/analytics.js','ga');
  ga(‘create’, ‘UA-XXXXXXXX-X’, ‘auto’);
  ga(‘send’, ‘pageview’);
  </script>
<title>My Awesome App</title>
</head>
<body>
  <div id=”root”></div>
</body>
</html>

Сначала создайте частичный, аналогичный корневому файлу React, который мы создали:

// /path/to/partials/analytics.html
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’https://www.google-analytics.com/analytics.js','ga');
ga(‘create’, ‘UA-XXXXXXXX-X’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>

Настройте это в своей конфигурации:

// webpack.config.js
new HtmlWebpackPartialsPlugin([
 {
   path: ‘./path/to/partials/body.html’
 },
 {
   path: ‘./path/to/partials/analytics.html’,
   priority: ‘high’,
   location: ‘head’
 }
)

Запустите сценарий сборки Webpack, и все готово!

Обратите внимание, что мы обновили единственный объект до массива объектов. Оба способа будут работать.

А остальная часть index.html…

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

Если вы не уверены, сделайте резервную копию! Не делайте предположений и потеряйте свою работу.

Найдите более полезные примеры?

Дополнительные примеры рабочего кода и руководства по базовой настройке можно найти на странице Partials for HTML Webpack Plugin на Github.

Еще больше javascript, UX и других интересных вещей от меня в Twitter.

Первоначально опубликовано на странице https://www.colbyfayock.com/2018/07/stop-using-custom-templates-in-your-webpack-react-apps.