需要安裝的依賴
- vue-loader
- vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
webpack.config.js 配置
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
// 兩種模式 development 和 production
mode: 'development',
// 入口文件
entry: './app/main.js',
// 輸出文件名稱和路徑
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
// 監聽文件變化
watch: true,
// 加載器: 用於識別更多的文件類型
module: {
// 規則
rules: [
{
// 文件後綴, 一定是正在表達式
test: /\.vue$/,
// 加載器名稱
loader: 'vue-loader',
// 包含的文件
include: [path.resolve(__dirname, 'app')]
}
]
},
// 插件
plugins: [
// 確保安裝這個插件
new VueLoaderPlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
app/main.js
import Vue from 'vue'
import App from './App.vue'
import bus from './utils/bus'
Vue.use(bus)
new Vue({
el: '#app',
render(h) {
return h(App)
}
})
app/App.vue
<template>
<div>
hello world!!!
</div>
</template>
<script>
export default {
}
</script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script src="./dist/bundle.js"></script>
