Web component demo.html configuration

[Marcus-Rise]

What problem does this feature solve?

How to configure demo.html content at web component build target?

What does the proposed API look like?

chainWebpack: config => {
        config
            .plugin("html")
            .tap(args => {
                if (process.env.NODE_ENV === "production") {
                    args[0].templateContent = `
<meta charset="utf-8">
<title>room-scheme demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./room-scheme.js"></script>

<room-scheme data-scheme=${JSON.stringify(data)}></room-scheme>
`
                }
                return args
            })
    }

[qmhc]

I also want to this feature

[johnnypiston]

me too

[LinusBorg]

You can make it a plugin :)

[Marcus-Rise]

It can resolve

const HtmlWebpackPlugin = require("html-webpack-plugin");
const data = require("./src/data.json");

module.exports = {
    configureWebpack: {
        plugins: [
            new HtmlWebpackPlugin({
                filename: "demo.html",
                minify: false,
                templateContent: `
<meta charset="utf-8">
<title>room-scheme demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./room-scheme.js"></script>

<room-scheme data-scheme='${JSON.stringify(data)}'></room-scheme>`
            })
        ]
    }
}