Конфигурация webpack для библиотеки реакции + демонстрация html библиотеки? - PullRequest
Новая
       80

Конфигурация webpack для библиотеки реакции + демонстрация html библиотеки?

0 голосов
/ 17 июня 2020

Я создаю библиотеку React, которую можно включить как отдельный файл js. (И css, но это не имеет значения.)

Я также хочу создать демонстрационную страницу html, которая показывает варианты использования; в частности, у него будет кнопка #demo с прослушивателем onClick, который открывает основной компонент библиотеки - слушатель помещается с помощью простого js DOM API и вызывает myLib.start().

Легко сделать конфигурацию, которая включает оба: 

output: {
    // ...
    library: 'myLib'
},

заботится о предоставлении доступа к библиотеке внешнему миру; HtmlWebpackPlugin создает файл html, который включает index.js, который содержит демонстрационный вызов.

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

Я подумал, что функция entry в webpack будет идеальным кандидатом для этого разделения: 

    entry: {
        main: path.resolve('src/index.js'),
        demo: path.resolve('src/demo.js')
    },

И это кажется многообещающим: в режиме сборки он создает два отдельных файла, один без слушателя, а другой с.

Однако файл html не то, что я ожидал: он включает оба js файлов. В документации для HtmlWebpackPlugin сказано следующее:

Если у вас есть несколько точек входа в веб-пакет, все они будут включены с тегами в сгенерированный HTML.

Да, здорово, очень полезно, но почему?

Как я могу указать HtmlWebpackPlugin использовать определенную точку входа c для вставки на страницу html?

...