It does not work to use Vue in index.html under webpack

without Webpack:
this simple example is fine. Open it on the browser and you can see "hello"

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.js"></script>
    <title>Test</title>
</head>

<body>
    <div id="app">
        {{ msg }}
    </div>

    <script> 
        console.log("html init") 
        new Vue({
            el: "-sharpapp",
            data: {
                msg: "hello"
            }
        });
    </script>

</html>

then under Webpack, it is still a simple example, and it is not feasible. The browser changes from "{{msg}}" to nothing and console does not report any errors.

index.html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
</head>

<body>
    <div id="app">
        {{ msg }}
    </div>

    <script> console.log("html init") </script>

</html>

index.js:

import Vue from "vue";
console.log("init");
window.onload = function () {
    console.log("onload...")
    new Vue({
        el: "-sharpapp",
        data: {
            msg: "hello"
        }
    });
}

package.json:

{
    "name": "vue_sample",
    "version": "1.0.0",
    "main": "index.js",
    "description": "",
    "scripts": {
        "dev": "node node_modules/webpack-dev-server/bin/webpack-dev-server.js",
        "build": "node node_modules/webpack/bin/webpack.js --config webpack.config.production.js"
    },
    "dependencies": {
        "copy-webpack-plugin": "^4.5.1",
        "update": "^0.7.4"
    },
    "devDependencies": {
        "babel-core": "^6.22.1",
        "babel-loader": "^7.1.2",
        "babel-plugin-transform-runtime": "^6.22.0",
        "babel-polyfill": "^6.26.0",
        "babel-preset-env": "^1.2.1",
        "babel-preset-stage-2": "^6.22.0",
        "babel-register": "^6.22.0",
        "babel-runtime": "^6.23.0",
        "webpack": "^4.1.1",
        "webpack-cli": "^2.0.11",
        "webpack-dev-server": "^3.1.1",
        "css-loader": "^0.28.10",
        "file-loader": "^1.1.11",
        "url-loader": "^1.0.1",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.0.6",
        "vue": "^2.5.15",
        "vue-html-loader": "^1.2.4",
        "vue-loader": "^14.2.1",
        "vue-template-compiler": "^2.5.15"
    },
    "license": "MIT",
    "author": "xxx"
}

webpack configuration

const path  = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const config = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"./dist"), 
        filename:"[name].js",
    },
    resolve:{
        extensions:[".js",".json",".jsx",".css",".vue"]
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/(node_modules|bower_components)/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:["env"],
                        // babel-plugin-transform-runtime
                        plugins:["transform-runtime"]
                    }
                }
            },
            {test:/\.vue$/,use:"vue-loader"},
            {test:/\.css$/,use:["vue-style-loader","style-loader","css-loader"]},
            {test:/\.less$/,use:["style-loader","css-loader","less-loader"]},
            {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]},
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2|svgz)$/,
                use:{
                    loader: "file-loader",
                    options: {
                      name: "assets/images/[name].[ext]?[hash]"
                    }
                }
            },
        ]
           
    },
    devtool: "-sharpeval-source-map",
    plugins:[
        new HtmlWebpackPlugin({template:"./src/index.html"}),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        historyApiFallback: true,
        noInfo: true,
        overlay: true,
        port:38080,
        hot:true,
        inline:true,
        open:false
    }
}

module.exports = config;