Javascript 如何在webpack项目中加载web组件？_Javascript_Typescript_Webpack_Ecmascript 6_Web Component

Javascript 如何在webpack项目中加载web组件？

javascript typescript webpack ecmascript-6

Javascript 如何在webpack项目中加载web组件？,javascript,typescript,webpack,ecmascript-6,web-component,Javascript,Typescript,Webpack,Ecmascript 6,Web Component,我已经开始尝试使用webpack和webcomponents。到目前为止，我只运行了这个基本的web组件示例，没有使用webpack。如果我只是使用标记将web组件加载到index.html中，那么就会呈现出它的内容。但是，当我尝试使用基本的网页设置运行相同的示例时，我没有看到呈现的模板服务器已成功启动，我可以看到console init消息。遗漏的步骤是什么？我希望能够以这种方式连接它们我有以下文件： index.html <!DOCTYPE html> <html la

我已经开始尝试使用webpack和webcomponents。到目前为止，我只运行了这个基本的web组件示例，没有使用webpack。如果我只是使用

标记将web组件加载到

index.html

中，那么就会呈现出它的内容。但是，当我尝试使用基本的网页设置运行相同的示例时，我没有看到呈现的模板

服务器已成功启动，我可以看到console init消息。遗漏的步骤是什么？我希望能够以这种方式连接它们

我有以下文件：

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <base href="/">
        <meta charset="UTF-8">
        <title>Web Components App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>

    <body>
        <vs-app></vs-app>
    </body>

</html>

应用程序ts

module.hot && module.hot.accept();

// Components
import { App } from './app';

// Styles
require('./shared/scss/main.scss');

console.log('Initialise Main');

/**
 * App
 */
export class App extends HTMLElement {

    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = this.template;
    }

    get template() {
        return `
        <div>This is a div</div>
        `;
    }
}
window.customElements.define('vs-app', App);

const webpack = require("webpack"),
    path = require("path"),
    CopyWebpackPlugin = require('copy-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');

// Constants
const BUILD_DIR = path.join(__dirname, "../../build"),
    PUBLIC_DIR = path.join(__dirname, "../../public"),
    NODE_MODULES_DIR = path.join(__dirname, "../../node_modules");

// Shared between prod and dev
module.exports = {

    entry: "./public/main.ts",

    output: {
        // Since webpack-dev-middleware handles the files in memory, path property is used only in production.
        path: BUILD_DIR,
        publicPath: "/",
        filename: "bundle.js"
    },

    resolve: {
        extensions: ["*", ".ts", ".js"]
    },

    module: {

        loaders: [{
                test: /\.ts?$/,
                loader: "awesome-typescript-loader",
                include: PUBLIC_DIR,
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                loader: "style-loader!css-loader!autoprefixer-loader"
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader'
            },
        ]

    },

    // Base plugins
    plugins: [

        new CopyWebpackPlugin([
            {
                from: `public/shared/images`,
                to: 'images'
            },
        ]),

        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),

        // Load bundle.js after libs are loaded
        new ScriptExtHtmlWebpackPlugin({
            defaultAttribute: 'defer'
        })
    ],

    stats: {
        colors: true,
        modules: true,
        reasons: true,
        errorDetails: true
    }
};

编辑

最终，我通过移动下面一行

window.customElements.define（'vs-app'，app'）得到了呈现的组件从app.ts
到main.ts
。与此同时，我发现即使这样也没有必要
// This is enough to trigger rendering
import { App } from './app';
App;

然而，我仍然有一个问题。由于webpack热重新加载，该组件最终注册了两次，并给出了一个错误。仍在寻找解决办法
编辑2
在网上进行了一些研究之后，我终于找到了问题：我没有inject:false属性。这触发了webpack加载两次相同的内容。看来我终于可以继续开发这个应用了。然而，我很想找到替代这种设置的方法，只是为了确认我走的是正确的道路
new HtmlWebpackPlugin({
    template: 'public/index.html',
    inject: false 
}),

建立我还在想办法让它与typescript
一起工作。你不能，你必须自己安装。