时间戳

首页 > 解决方案 > Lit-element 和 webpack

webpack - Lit-element 和 webpack

问题描述

有没有办法让 webpack 与 lit-element WebComponents 一起工作？环顾四周，我发现了一些示例 webpack 配置，几乎没有实际使用。例如，我如何制作 webpackfile-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,
                    },
                }
            ]
        }
}

两个加载器都无法识别 web 组件中的 html 模板，并且它们不会将其作为 html 处理。有没有办法让 webpack 用什么来替换我的图像资产file-loader？

最小示例代码：

索引.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);

标签： webpacklit-element

解决方案

加载器仅影响 JS 导入的行为，即html-loader仅当捆绑器找到 .html 导入时才会发挥作用：

import html from './file.html';

（来自 Webpack 的 html-loader文档）。

这同样适用于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 插件可以做到这一点。此外，还有一些为 lit-element 制作的 Webpack 加载器，您可能会感兴趣：lit-scss-loader、lit-loader。

您可能想查看Open WebComponents 指南的Webpack 部分，了解一些好的建议和基本 wp 配置。

推荐阅读