Question

我已经开始尝试使用webpack和webcomponents。到目前为止，我设法只运行这个没有webpack的基本Web组件示例。如果我只是使用index.html标记在<script>中加载网络组件，而不是我提供的内容。但是，当我尝试使用基本webpack设置运行相同的示例时，我看不到渲染的模板。

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

我有以下文件：

的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>

main.ts

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

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

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

console.log('Initialise Main');

app.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);

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

修改

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

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

但是，我还有一个问题。由于webpack热重新加载，组件最终注册两次，给出错误。仍在寻找解决方案。

修改2

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

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

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

0 个答案: