webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin

webpack配置报错,先说一下发生了什么:vue-loader v15 版本新特性,不向后兼容。

以前:vue-loader直接用;

现在:Vue Loader v15 因为新功能策略的原因必须要一个伴随插件;

别着急,vue loader v15 已经将插件内置了,所以不用费力气去找了。

使用方法:

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

你已经知道怎么做了,可以就此离开。但如果你还有疑问,接下来是就是为你准备的:
疑问1:我加载了一个vue-loader,本来直接用就完事了,现在又要从vue-loader中整出个插件,再用一遍,这不是增加游戏难度吗?这是负优化!我抗议!
解释1:失去是为了得到更多,多写两行代码是为了少写更多代码。这里头的理念是这样的:一次插件,全局使用。
以vue使用less为例,
以前

rules: [
    //...
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                'less': [
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        }
    }
]

这个less-loader是为.vue文件专用,其中运用内联加载器字符串隐式地进行了链式处理:less-loader > css-loader > vue-style-loader,注意加载顺序(从后到前)。
可是别忘了 ,项目中,需要用到less的地方可不止.vue文件,比如:
在webpack的入口main.js文件中引入less:

import '../my-theme/index.less';

这么一来你就得为less额外配置了,这样就得复制粘贴一遍:

rules: [
    {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                'less': [
                    'vue-style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }
        }
    },
    {
        test: /\.less$/,
        use: [
            'vue-style-loader',
            'css-loader',
            'less-loader'
        ]
    }
]

现在:使用了伴随插件:

module: {
    //...
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader',
        },
        {
            test: /\.less$/,
            use: [
                'vue-style-loader',
                'css-loader',
                'less-loader'
            ]
        },
    ]
},
//...
plugins: [
    new VueLoaderPlugin()
]

可以看到.vue中的options:{}已经删除了,语义上读起来就是:用vue加载器处理vue文件。非常的清爽。
.vue中的.less文件不再是vue代码块,而是被当成了一个真正的less文件,所以只要写一次.less配置,就可以运用到全局+vue中。

当然,还有更多的新特性:
参考官方文档 https://vue-loader.vuejs.org/migrating.html#a-plugin-is-now-required。

你可能感兴趣的:(webpack vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin)