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;
Javascript webpack vue.js
Mar.09,2021

according to your classification, there are two cases, the first is to introduce vue.js, directly, and the second is to use webpack to package .vue single-file components.

  1. in the first case, the browser opens the console and looks at the source code in Sources, and you can see {{msg}}. In general, html, packaged with .vue only contains < div-sharpapp > < / div >, but does not include {{}}. If it contains {{}}, an error will be reported. This is because the version of vue referenced in the two cases is different.
  2. vue is roughly divided into two versions, vue.js and vue.runtime.js. There is a difference in the official document, which you can see for yourself. It's roughly vue.js = vue.runtime.js + compile. This compile is responsible for traversing the {{}}, vue instructions (such as v-if) in the html, and then translating it into the corresponding vNode (virtual DOM).
  3. while single file components generally use vue.runtime.js, with vue.runtime.js has two advantages. Because this version does not include the smaller size of compile, (benefit 1), you only need to use vue-loader to translate .vue into vNode in advance, so that the page can be seen by client browsers without compile (benefit 2, users can see the page faster). This is why there is only < div id= "- sharpapp" > < / div > in the console in this case.
    4. In the second case of
  4. , instead of writing < div id= "- sharpapp" > < / div > directly in your index.html, it also contains {{}}, but the file is not pre-compiled by webpack with vue-loader, webpack just packages .vue and so on into bundle.js through the entry file and puts it into this index.html. So your index.html to the client, there is still {{}. So it initially appears as {{}}-as the content in the native html, and then suddenly disappears, presumably because the vue.runtime.js runtime overwrites the content in < div id= "- sharpapp" > < / div >.

what does the console output
I think the compilation error here is that there is no configuration

it is recommended to improve the webpack configuration
clipboard.png

Previous: Queue execution of promise function

Next: The problem of src,dist configuration path in Gulp

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-42af638-6469.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-42af638-6469.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?