网上看了一堆和webpack有关的完全把自己绕进去了！
首先！webstorm自动生成的文件是帮你配置好webpack的！基本不需要再下载webpack的插件什么的！依赖也可以在配置文件里面看到！所以也不需要再改什么配置文件！像下面这样最开始这一推就是自动用vue-cli创建好了！
可以直接运行npm run serve是因为在package.json配置文件中声明了脚本，实际上是简写。serve只是个key，指向的才是真正的我们执行的传说中比较好入门的vue-cli。
这也是为什么很多程序运行的是npm run dev，因为配置文件这里写的是dev
书上的例子说这个是为了快速启动！端口也是在这里修改。
以及关于打包之后的文件放哪里，这是webpack.config.js里面定义的。
但是！如果想进一步配置加上css，就需要在下面导入支持css的loaders。test就是遇到后缀名为.xxx的文件时使用xxx loader（加载器）进行打包。如果没有安装插件都打包到main.js中！
因为引入了babel来解析es6，所以要在根目录引入.babelrc配置，告诉webpack如何依赖配置编译es6代码。
这时候创建了app.vue组件，作为webpack的入口的main.js需要引入这个组件打包。但是app.vue自己引用的组件不需要再在这里声明！
注意：
这样最后打包完之后run起来可以看到文件的结构是：
因此最后集合在一个index.html中只需要引用dist下的css和js就行。
最后重点来了！怎么断点调试.vue组件，source里面好像看到js，其实不是的！只是需要打开webpack，然后就能看到一个个组件！在js部分也像往常一样断点调试了！！
2086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
