Question

我刚开始第一次混用Webpack。我安装了webpack 4，并能够构建一个小型测试站点。在测试项目中，我编写了一个非常小的Web组件（也刚刚开始编写Web组件）。令我惊讶的是，一切都很好。直到...

我将此行包含在我的Web组件中：

console.log(this.hasAttribute('emphasis');

在我将该行添加到组件webpack之后，将不再构建。如果我将其注释掉，一切正常。这是webpack给我的错误：

Module parse failed: Unexpected token (32:55)
You may need an appropriate loader to handle this file type.
connectedCallback(){
    console.log(this.hasAttribute('emphasis');

我使用的是没有配置文件的webpack 4最简单的示例。

为什么要检查破坏Webpack的属性？
如果我需要一个用于Web组件的模块加载器，为什么在我检查该属性之前，它会一直抱怨呢？
如果我需要装载机，我需要哪个装载机？

这是我的Web组件供参考：

(function() {
const template = document.createElement('template');

template.innerHTML = `
        <style>
            :host {
                padding: 0.7em 0.57em;
            }
        </style>
        <slot></slot>
    `;

class MyButton extends HTMLElement {
    constructor(){
        super();
        this.attachShadow({mode: 'open'});
        this.shadowRoot.appendChild(template.content.cloneNode(true));

    }

    connectedCallback(){
        console.log('connected');
        console.log(this.hasAttribute('emphasis'));
    }

}

window.customElements.define('my-button',MyButton);
})();

我是否需要模块加载器才能将webcomponents与webpack 4一起使用？

0 个答案: