webpack4學習之問題三

問題

ASUS@DESKTOP-TTKF7MG MINGW64 /e/webpack_vue
$ webpack-dev-server --open
40% building 1/1 modules 0 activei ?wds?: Project is running at http://localhost:9000/
i ?wds?: webpack output is served from /
i ?wds?: Content not from webpack is served from E:\webpack_vue\dist
× ?wdm?: Hash: a90a4435e4a9138b3a3e
Version: webpack 4.29.6
Time: 2348ms
Built at: 2019-04-09 13:48:56
Asset Size Chunks Chunk Names
app.min.js 663 KiB app [emitted] app
index.html 57 bytes [emitted]
Entrypoint app = app.min.js
[0] multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js 40 bytes {app} [built]
[./app/js/App.vue] 344 bytes {app} [built] [failed] [3 errors]
[./app/js/home/index.vue] 344 bytes {app} [built] [failed] [2 errors]
[./app/js/main.js] 216 bytes {app} [built]
[./app/js/router/index.js] 216 bytes {app} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {app} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {app} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {app} [built]
[./node_modules/url/url.js] 22.8 KiB {app} [built]
[./node_modules/vue/dist/vue.runtime.esm.js] 222 KiB {app} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:9000] (webpack)-dev-server/client?http://localhost:9000 8.26 KiB {app} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.59 KiB {app} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {app} [built]
[./node_modules/webpack/hot sync ^.\/log$] (webpack)/hot sync nonrecursive ^.\/log$ 170 bytes {app} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {app} [built]

• 19 hidden modules

ERROR in ./app/js/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
@ ./app/js/main.js 2:0-28 11:2-5
@ multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js

ERROR in ./app/js/home/index.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
[vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
@ ./app/js/router/index.js 3:0-37 11:12-16
@ ./app/js/main.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js

ERROR in ./app/js/App.vue
Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
@ ./app/js/main.js 2:0-28 11:2-5
@ multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js

ERROR in ./app/js/App.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (E:\webpack_vue\node_modules\@vue\component-compiler-utils\dist\parse.js:14:22)
at Object.module.exports (E:\webpack_vue\node_modules\vue-loader\lib\index.js:67:22)
@ ./app/js/main.js 2:0-28 11:2-5
@ multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js

ERROR in ./app/js/home/index.vue
Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
at parse (E:\webpack_vue\node_modules\@vue\component-compiler-utils\dist\parse.js:14:22)
at Object.module.exports (E:\webpack_vue\node_modules\vue-loader\lib\index.js:67:22)
@ ./app/js/router/index.js 3:0-37 11:12-16
@ ./app/js/main.js
@ multi (webpack)-dev-server/client?http://localhost:9000 ./app/js/main.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./app/views/index.html] 20 bytes {0} [built]
i ?wdm?: Failed to compile.

原因：

需要在webpack.config.js文件中配置vue-loader

參考https://vue-loader.vuejs.org/

解決辦法：
安裝：npm install -D vue-loader vue-template-compiler

在webpack.config.js文件中配置vue-loader：

const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]