webpack打包vue项目指定打包文件夹_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文件了，但是很多人照着做，在运行打包时还是报错了，如下：