今天同学问了我有关 vue 和 webpack 构建项目的过程，发现自己果然还是有很多缺乏的知识点，尤其是 webpack 的一些配置，之前只知道怎么用 vue-cli 一键构建项目，就对 webpack 这些半知半解也没有去学习，光看文档也很难理解它的用处。但是在自己的持续毅力 debug，终于解决问题并且补了一顿 webpack 和 vue 的知识。趁着还记得赶紧搬小板凳记笔记，防止以后忘记了。
同学的原项目地址：https://gitee.com/qiapi/testrh.git
项目无法正常运行起来。
目的：不使用vue-cli，使用vue单文件组件构建项目，vue单文件组件需要配合webpack打包。
原项目结构：
app —–
– main.js //入口文件
– nav.vue //vue单文件组件
– test.js //一个纯粹测试用的文件
public —-
– index.html
package.json
webpack.config.js
理论上 main.js 中正确引入组件，webpack 正确配置就可以正常运行起来。
npm start 的时候 webpack 会根据配置文件的入口文件找到 main.js，打包相关依赖。打包 main.js 的时候根据 new Vue 中的 el 属性找到index.html中的挂载点，将 template 的内容挂载到该元素，components 属性引入相关组件。
npm install
- 直接
npm start运行该项目，会发现缺少 webpack 和 webpack-dev-server 等相关依赖包，可以修改 package.json，然后直接npm install
可以安装好相关依赖包。
image.png
浏览器控制台会报上述错误，尝试修改为“./nav.vue”，原因是他没有忽略后缀去匹配。也可以在 webpack 中配置（参考链接：https://segmentfault.com/q/1010000004707962/a-1020000004710230）
reslove: {
extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
}
- 修改后就会发现webpack报错无法解析vue单文件组件中的template模板，提示安装
vue-template-compiler，同时安装依赖包vue和vue-template-compiler后此问题解决。 - 在 main.js 中引入
import Vue from 'vue'这是 main.js 文件中必须引入的。
image.png - 添加根目录的 index.html 文件，仍然提示找不到
#app的元素，怀疑
main.js 根本找不到 index.html，思考了 webpack 如何去 index.html 里面找到 app 元素的，应该在配置文件中有所体现，不然 webpack 不知道去哪里找 index.html，对比了使用 vue-cli 的 webpack配置文件，搜索定位
index 所在，发现了HtmlWebpackPlugin插件中存在，百度了这个插件的作用，就是用来确定这个 index.html 的。
参考链接：https://segmentfault.com/a/1190000007294861
参考链接：https://segmentfault.com/a/1190000008590102 - 修改webpack配置文件HtmlWebpackPlugin的配置，浏览器控制台出现：
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>)
页面依旧空白，怀疑是其影响，百度出现这个 warning 的原因。在
webpack 配置文件中加入resolve: { alias: { 'vue': 'vue/dist/vue.js' } }配置别名，warning 问题解决。页面无任何warning
image.png
参考链接：http://blog.csdn.net/fengjingyu168/article/details/72911421
参考链接：https://www.imooc.com/article/17868 页面依旧空白，查看控制台无任何报错和warning，审核元素页面有app元素却没有渲染组件，main.js文件有引入也没有渲染nav组件。此处webpack应该
没有问题，回到main.js 和nav.vue寻找问题。
image.png- 检查main.js修改
new Vue中component的语法错误为components,浏览器控制台报warning：[Vue warn]: Do not use built-in or reserved HTML elements as component id: nav
百度warning的原因是存在同名组件？怀疑问题在组件名上面，修改组件名为大写Nav,页面的warning解决。
参考链接：http://blog.csdn.net/qq_34645412/article/details/78846782
image.png - 页面依旧空白，检查main.js，加入
template:"<Nav/>",页面正常显示了Nav组件。但是控制台waring重新出现
image.png
9.修改nav.vue中的name为navigator,同时修改main.js中引用的组件名，页面无warning了。
也补充学习了其他webpack相关知识：
publicPath
参考链接：http://blog.csdn.net/kcetry/article/details/53300331
参考链接：https://www.cnblogs.com/yueliangcl/p/6679427.html
webpack2loader的新写法：
参考链接：http://www.css88.com/doc/webpack2/concepts/loaders/
