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

Adr*_*isa 7 javascript web-component typescript ecmascript-6 webpack

我已经开始尝试 webpack 和 webcomponents。到目前为止，我只在没有 webpack 的情况下运行了这个基本的 Web 组件示例。index.html如果我只是使用标签加载 Web 组件，<script>那么我就会得到渲染的内容。但是，当我尝试使用基本的 webpack 设置运行相同的示例时，我看不到渲染的模板。

服务器已成功启动，我可以看到控制台初始化消息。缺少什么步骤？我希望能够以这种方式连接它们。

我有以下文件：

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

Run Code Online (Sandbox Code Playgroud)

主要.ts

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

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

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

console.log('Initialise Main');

Run Code Online (Sandbox Code Playgroud)

应用程序.ts

/**
 * 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);

Run Code Online (Sandbox Code Playgroud)

webpack-common.js

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
    }
};

Run Code Online (Sandbox Code Playgroud)

编辑

最终我得到了渲染的组件，将以下行 window.customElements.define('vs-app', App);从移动app.ts到main.ts。与此同时，我发现即使这样也是没有必要的。

// This is enough to trigger rendering
import { App } from './app';
App;

Run Code Online (Sandbox Code Playgroud)

但是，我仍然有一个问题。由于 webpack 热重载，该组件最终注册了两次，从而出现错误。仍在寻找修复方法。

编辑2

经过一些在线研究后，我设法找到了问题：我没有inject: false 属性。这触发了 webpack 加载两次相同的东西。看起来我终于可以继续开发该应用程序了。不过，我很想找到此设置的替代方法，只是为了确认我走在正确的道路上。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，11 月前
查看次数：	6076 次
最近记录：	7 年，11 月前