极客观点
项目管理
HarmonyOS
在不用Webpack的情况下：
这个简单的例子是可以的。在浏览器上打开可以看到 "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: '#app',
data: {
msg: 'hello'
}
});
</script>
</html>
然后在Webpack下，依然是一个简单的例子，就不可行了。浏览器会从"{{ msg }}"变为什么都看不到，console也不报任何错误。
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: '#app',
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 配置
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: '#eval-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;
按照你的分类，分2种情况，第一种是直接引入vue.js, 第二种是使用webpack打包.vue的单文件组件。