vue-loader@15.x VueLoaderPlugin 记录一下

10 篇文章 0 订阅

报错:==vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.==

目前,

//两个方式都可以的,随便用一个

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

// 或者 

const { VueLoaderPlugin } = require('vue-loader')


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

问题描述:

基本上,加上这样上面这些都是没问题的。但还是会报错,原因在于下面这段代码,

可以看到,加入了resolveLoader之后,所有rules下的loader配置都没有直接跟随后缀-loader ,导致一直再报各种各样的错误信息!

module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel',
    }, {
      test: /\.vue$/,
      loader: 'vue',
    }, {
      test: /\.(css|less)$/,
      include: resolve('/'),
      loader: 'style!css!less',
    }]
}


resolveLoader: {
    moduleExtensions: ['-loader'],
},
解决方案:
module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
    }, {
      test: /\.vue$/,
      loader: 'vue-loader',
    }, {
      test: /\.(css|less)$/,
      include: resolve('/'),
      loader: 'style-loader!css-loader!less-loader',
    }]
}

package.json 文件版本置上

{
  "name": "@eid-bi/web-common",
  "author": "",
  "version": "1.0.8",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./build/webpack-prod.config.js --mode production --progress --colors",
    "dev": "webpack-dev-server --config ./build/webpack-dev-server.config.js --mode development --progress --colors"
  },
  "license": "ISC",
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "ip": "^1.1.5",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.22.1",
    "url-loader": "^1.1.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rkatsiteli

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值