webpack打包vue项目demo

这两天在学习使用webpack去打包vue，遇到了一些坑，在这里提供一套可用的配置供大家参考。

上面是我的目录。（有些文件不是开始新建的文件，下面会进行说明）

首先大家可以新建一个空目录，假设叫vue-test。
进入到里面新建上述的App.vue,main.js,webpack.config.js,index.html这四个文件。
接下来使用npm进行初始化。没有安装node.js的小伙伴安装一下吧，目前npm是安装node时自带了。不用单独安装了。

1. 初始化 ： npm init -y
2. 安装必要的loader：见下方图
3. 编写配置文件：webpack.config.js.，见下图
4. 编写App.vue：主要由三个部分组成，template，script，style。
5. 编写main.js
6. 编写index.html文件
7. 使用webpack进行打包，我的版本是2.x。因为配置信息已经写好，所以如果不加参数的话，可以直接在命令行中敲：webpack。就会看到目标文件bundle.js生成。然后手动打开index.html。看到了welcome vue字样。

注：babel.config.js这个文件是为了解决webpack2.x时有些loader的plugin无法进行配置，必须建立对应的 loadername.config.js所进行建立的，里面是：

使用1.0的同学可以去查一下1.0的一个写法，这里就不再演示。

babel.config.js
module.exports=