webpack配置“.vue”文件报错：vue-loader was used without the corresponding plugin. Make sure to include VueL

我们在webpack中处理.vue结尾的文件时需要运行下面命令：

npm install vue-loader vue-template-compiler --save-dev

在配置文件配置：

const path = require("path");
module.exports = {
  mode: "development",
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

运行打包命令，显示错误：

这是由于vue-loader的版本造成的，当它版本为13.0.0之间的就不会报这个错误。上面它明确提示要我们在配置文件中引入VueLoaderPlugin。那我们就引入它：

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
  mode: "development",
  entry: "./main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],

  resolve: {
    alias: {
      vue$: "vue/dist/vue.esm.js",
    },
  },
};

这个插件不用另外下载，直接包含在vue-loader下面，如果引入这个插件，再次打包显示这个插件不存在的错误的话，那就是你的版本太低了。运行下面命令即可：

npm install [email protected] --save-dev

这个版本的vue-loader才自带这个插件。再次打包即可。