Лит-элемент и веб-пакет - PullRequest
Новая
       3

Лит-элемент и веб-пакет

1 голос
/ 10 февраля 2020

Есть ли способ заставить веб-пакет работать с веб-компонентами с подсветкой? В поисках я нашел пример конфигурации веб-пакета, практически не использующийся в реальных условиях. Например, как я могу заставить веб-пакет file-loader или html-loader распознавать мои изображения? Если у меня есть следующая конфигурация 

module.exports = {
    entry: {
      main: "./src/index.js",
    },
    module: {
            rules: [
                {
                    test: /\.html$/,
                    use: ["html-loader"]
                },
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    loader: 'file-loader',
                    options: {
                        name: "[name].[hash].[ext]",
                        esModule: false,
                    },
                }
            ]
        }
}

, то оба загрузчика не распознают шаблон html внутри веб-компонента и не будут обрабатывать его как html. Есть ли способ сделать так, чтобы webpack заменял мои графические ресурсы на то, что file-loader сообщает?

Минимальный пример кода:

index. html

<body>
This is an image outside a webcomponent <img src="./assets/polymer-logo.jpg" />
<my-element></my-element>
</body>

index. js

class MyElement extends LitElement {
  render() {
    return html`
      This image is inside a web component:
      <img src="./assets/polymer-logo.jpg" />
    `;
  }
}
customElements.define('my-element', MyElement);

1 Ответ

1 голос
/ 14 февраля 2020

Загрузчики влияют только на поведение JS импорта, то есть html-loader вступит в игру только тогда, когда упаковщик найдет. html import: 

import html from './file.html';

(из html Webpack) загрузчик документы ).

То же самое относится и к file-loader: 

import image from './image.png'; // This instructs Webpack to emit the
                                 // asset into the output directory
                                 // and returns the public URL...

class MyElement extends LitElement {

  render() {
    return html`
      This image is inside a web component:
      <img src=${image} /> <!-- ...that you can set as the src -->
    `;
  }

}

Что касается шаблона, он на самом деле зависит от того, что вы подразумеваете под "обработать его как html": если вы хотите загрузить это из внешнего html файла. Я не думаю, что в настоящее время есть простой способ сделать это с помощью упаковщиков; если вы хотите минимизировать его, есть плагин babel , который позволяет это сделать. Также есть несколько загрузчиков Webpack, созданных для лит-элемента, которые могут вас заинтересовать: lit-s css -loader , lit-loader .

You Возможно, вы захотите взглянуть на раздел Webpack руководства Open WebComponents, чтобы найти некоторые хорошие рекомендации и базовые конфигурации wp.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...