webpack打包vue文件

在webpack中需要把vue单文件组件打包需要经过下面几步：

 

一、前提：

    忽略前面项目部署的流程，假定你的webpack项目中已经安装vue，并创建了vue单文件组件进行渲染了。

二、打包步骤：

     1、安装vue文件加载器

$ cnpm i vue-loader vue-template-compiler -D

    其中vue-loader为vue文件加载器，而vue-loader依赖于vue-template-compiler。   

    2、在配置文件webpack.config.js中，添加加载规则

//......
  module: {
    rules: [

        // ...
      { test: /\.vue$/, use: "vue-loader" }

    ]
  }

//......

    vue文件只经过vue-loader处理

   

    3、爬坑：

     很多教程中完成上面两步就可以实现webpack打包vue文件了，但是很多人照着做，在运行打包时还是报错了，如下：

重点是这句话：

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

翻译为：使用vue-loader时没有相应的插件。确保在webpack配置中包含VueLoaderPlugin。

是的，在vue-loader v15版本之后，我们需要在webpack的配置文件中配置一下VueLoaderPlugin，plugin为插件，所以我们需要这么做：

//webpack.config.js

//引入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin');

//......
  plugins: [
   //......
    new VueLoaderPlugin() //配置插件
  ]
//......

配置完成之后，再运行就没有问题了。