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的解构赋值