Webpack 4.0 打包 Vue 應用時出現沒法使用Vue-loader問題及解決方法

問題產生

當咱們寫好 app.vue webpack.config.js 後 滿心歡喜的在命令行輸入

npm run build
複製代碼

後結果發現報出

vue-loader was used without the corresponding plugin. Make sure to include 
複製代碼

此時會有兩種狀況:

• 你沒有安裝 vue-loader
• 安裝了vue-loader可是在webpack.config.js中沒有配置

問題解決

當沒有安裝vue-loader時的解決方法

在Terminal輸入

npm install vue-loader
複製代碼

此時問題應該已經解決

當已安裝vue-loader時

在webpack.config.js文件中添加

const  {VueLoaderPlugin}  = require('vue-loader')
module.exports={
    ...
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/.vue$/,
                use:'vue-loader' //在webpack4.0中用use取代loader
            }
        ]
    }
}
複製代碼

注：const {} = require() 爲ES6的解構賦值