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;