使用webpack绑定后，无法访问webcomponent中引用的图像_Webpack_Web Component

使用webpack绑定后，无法访问webcomponent中引用的图像

webpack

使用webpack绑定后，无法访问webcomponent中引用的图像,webpack,web-component,Webpack,Web Component,你好：我是webpack的新手。在这个项目中，我使用了一个使用图像的webcomponent。但是，在绑定过程中，我注意到图像并没有像使用普通css文件时那样复制到发行版详情如下 webpack.config.js const path = require('path'); module.exports = { entry: { main: ['./src/js/index.js'] }, output: { filename: '[name].js',

你好：我是webpack的新手。在这个项目中，我使用了一个使用图像的webcomponent。但是，在绑定过程中，我注意到图像并没有像使用普通css文件时那样复制到发行版

详情如下

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    main: ['./src/js/index.js']
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

import '../css/base.css'
import '../css/theme.css'
import '../css/styles.css'
import {MyTitleRow} from './my-title-row.js';

console.log('index.js');

dist

目录中的html文件

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Webpack with Webcomponent</title>
  </head>
  <body>
    <my-title-row data-title="check"></my-title-row>
    <script src="./index.js"></script>
  </body>
</html>

web组件

my-title-row.js*

//my-title-row.js
//
//创建模板
const template=document.createElement（'template'）；
template.innerHTML=`
：主持人{
左侧填充：0.8rem；
右侧填充：0.8rem；
最小高度：5.6雷姆；
显示：网格；
网格模板行：自动；
网格模板列：最大内容自动；
栅柱间隙：1.6rem；
对齐项目：居中；
证明项目：中心；
背景色：#313131；
颜色：#fafafa；
}
.标志{
身高：4.8雷姆；
宽度：4.8rem；
背景图像：url（“../images/logo.svg”）；
背景重复：无；
背景位置：中心；
背景尺寸：封面；
}
.头衔{
字号：1.2rem；
}
`
//创建自定义元素
导出类MyTitleRow扩展HtmleElement{
静态get ObservedAttribute（）{
返回['data-title']；
}
构造函数（）{
超级（）；
this._shadowRoot=this.attachShadow（{mode:'closed'}）；
这个.u shadowRoot.appendChild（template.content.cloneNode（true））；
}
//关于添加到DOM
connectedCallback（）{
}
//属性变化
attributeChangedCallback（名称、旧值、新值）{
newVal=（newVal==“未定义”）？“”：newVal；
交换机（名称）{
案例“数据标题”：
这个.u shadowRoot.querySelector（'.title'）.innerHTML=newVal；
打破
违约：
打破
}
}
}
//寄存器组件
window.customElements.define（'my-title-row'，MyTitleRow）；

捆绑过程不会生成Web包过程通常为引用的图像生成的图像，例如，在普通css文件中

谢谢你的帮助

// my-title-row.js
//
// create a template
const template = document.createElement('template');
template.innerHTML = `
    <style>
    :host {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        min-height: 5.6rem;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: max-content auto;
        grid-column-gap: 1.6rem;
        align-items: center;
        justify-items: center;
        background-color: #313131;
        color: #fafafa;
    }

    .logo {
        height: 4.8rem;
        width: 4.8rem;
        background-image: url("../images/logo.svg");
        background-repeat: none;
        background-position: center;
        background-size: cover;
    }

    .title {
        font-size: 1.2rem;
    }

    </style>
    <div class="logo"></div>
    <div class="title"></div>
`

// create the custom element
export class MyTitleRow extends HTMLElement {
    static get observedAttributes() {
        return ['data-title'];
    }


    constructor() {
        super();
        this._shadowRoot = this.attachShadow({ mode: 'closed' });
        this._shadowRoot.appendChild(template.content.cloneNode(true));
    }

    // on adding to the DOM
    connectedCallback() {
    }

    // attribute change
    attributeChangedCallback(name, oldVal, newVal) {
        newVal = (newVal === "undefined") ? '' : newVal;
        switch (name) {
            case 'data-title':
                this._shadowRoot.querySelector('.title').innerHTML = newVal;
                break;

            default:
                break;
        }
    }
}

// register component 
window.customElements.define('my-title-row', MyTitleRow);