vue初學測試之webpack4.29.6集成[email protected]報錯

報錯

Module Error (from ./node_modules/vue-loader/lib/index.js): vue-loader was used without the corresponding plugin. Make sure to include VueLo aderPlugin in your webpack config.

百度找到了答案，原來Vue-loader在15.*之後的版本使用時，需要像html-webpack-plugin一樣配置插件，在webpack.config.js裏配置下面這一句就好了

解決方案：

//webpack.config.js
let VueLoaderPlugin = require('vue-loader/lib/plugin');
new VueLoaderPlugin()  //在plugins裏new實例

具體案例代碼：執行了npm init -y，完成插件依賴，依次install插件，新建vue文件和入口文件main，如下

//package.json
{
  "name": "newpro",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.10",
    "vue-router": "^3.0.2"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.10",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "description": ""
}

//App.vue
<template>
    <div>{{msg}}</div>
</template>
<script>
// 結構template 行爲script 樣式style
export default {
    data(){
        return {
            msg:'hello'
        }
    }
}
</script>

//main.js
import Vue from 'vue';
import App from './App.vue';
new Vue({
    el:"#app",
    render:createElement=>createElement(App)
})

//webpack.config.js
let htmlWebpackPlugin = require('html-webpack-plugin');
let VueLoaderPlugin = require('vue-loader/lib/plugin');
let path = require('path');
module.exports = {
    mode:"development",
    entry:"./src/main.js",
    output:{
        filename:"build.js",
        path:path.resolve('./dist')
    },
    module:{
        rules:[
            {test:/\.css$/,use:['css-loader','style-loader']},//解析css文件
            {test:/\.vue$/,use:'vue-loader'}//解析vue文件，會自動關聯vue-template-compiler解析vue模板
        ]
    },
    plugins:[
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
}