今天同學(xué)問(wèn)了我有關(guān) vue 和 webpack 構(gòu)建項(xiàng)目的過(guò)程，發(fā)現(xiàn)自己果然還是有很多缺乏的知識(shí)點(diǎn)，尤其是 webpack 的一些配置，之前只知道怎么用 vue-cli 一鍵構(gòu)建項(xiàng)目，就對(duì) webpack 這些半知半解也沒(méi)有去學(xué)習(xí)，光看文檔也很難理解它的用處。但是在自己的持續(xù)毅力 debug，終于解決問(wèn)題并且補(bǔ)了一頓 webpack 和 vue 的知識(shí)。趁著還記得趕緊搬小板凳記筆記，防止以后忘記了。
同學(xué)的原項(xiàng)目地址：https://gitee.com/qiapi/testrh.git
項(xiàng)目無(wú)法正常運(yùn)行起來(lái)。
目的：不使用vue-cli，使用vue單文件組件構(gòu)建項(xiàng)目，vue單文件組件需要配合webpack打包。
原項(xiàng)目結(jié)構(gòu)：
app -----
- main.js //入口文件
- nav.vue //vue單文件組件
- test.js //一個(gè)純粹測(cè)試用的文件
public ----
- index.html
package.json
webpack.config.js
理論上 main.js 中正確引入組件，webpack 正確配置就可以正常運(yùn)行起來(lái)。
npm start 的時(shí)候 webpack 會(huì)根據(jù)配置文件的入口文件找到 main.js，打包相關(guān)依賴。打包 main.js 的時(shí)候根據(jù) new Vue 中的 el 屬性找到index.html中的掛載點(diǎn)，將 template 的內(nèi)容掛載到該元素，components 屬性引入相關(guān)組件。
npm install
- 直接
npm start運(yùn)行該項(xiàng)目，會(huì)發(fā)現(xiàn)缺少 webpack 和 webpack-dev-server 等相關(guān)依賴包，可以修改 package.json，然后直接npm install
可以安裝好相關(guān)依賴包。
image.png
瀏覽器控制臺(tái)會(huì)報(bào)上述錯(cuò)誤，嘗試修改為“./nav.vue”，原因是他沒(méi)有忽略后綴去匹配。也可以在 webpack 中配置（參考鏈接：https://segmentfault.com/q/1010000004707962/a-1020000004710230）
reslove: {
extensions: ['', '.js', '.json', '.vue', '.scss', '.css']
}
- 修改后就會(huì)發(fā)現(xiàn)webpack報(bào)錯(cuò)無(wú)法解析vue單文件組件中的template模板，提示安裝
vue-template-compiler，同時(shí)安裝依賴包vue和vue-template-compiler后此問(wèn)題解決。 - 在 main.js 中引入
import Vue from 'vue'這是 main.js 文件中必須引入的。
image.png - 添加根目錄的 index.html 文件，仍然提示找不到
#app的元素，懷疑
main.js 根本找不到 index.html，思考了 webpack 如何去 index.html 里面找到 app 元素的，應(yīng)該在配置文件中有所體現(xiàn)，不然 webpack 不知道去哪里找 index.html，對(duì)比了使用 vue-cli 的 webpack配置文件，搜索定位
index 所在，發(fā)現(xiàn)了HtmlWebpackPlugin插件中存在，百度了這個(gè)插件的作用，就是用來(lái)確定這個(gè) index.html 的。
參考鏈接：https://segmentfault.com/a/1190000007294861
參考鏈接：https://segmentfault.com/a/1190000008590102 - 修改webpack配置文件HtmlWebpackPlugin的配置，瀏覽器控制臺(tái)出現(xiàn)：
[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>)
頁(yè)面依舊空白，懷疑是其影響，百度出現(xiàn)這個(gè) warning 的原因。在
webpack 配置文件中加入resolve: { alias: { 'vue': 'vue/dist/vue.js' } }配置別名，warning 問(wèn)題解決。頁(yè)面無(wú)任何warning
image.png
參考鏈接：http://blog.csdn.net/fengjingyu168/article/details/72911421
參考鏈接：https://www.imooc.com/article/17868 -
頁(yè)面依舊空白，查看控制臺(tái)無(wú)任何報(bào)錯(cuò)和warning，審核元素頁(yè)面有app元素卻沒(méi)有渲染組件，main.js文件有引入也沒(méi)有渲染nav組件。此處webpack應(yīng)該
沒(méi)有問(wèn)題，回到main.js 和nav.vue尋找問(wèn)題。
image.png - 檢查main.js修改
new Vue中component的語(yǔ)法錯(cuò)誤為components,瀏覽器控制臺(tái)報(bào)warning：[Vue warn]: Do not use built-in or reserved HTML elements as component id: nav
百度warning的原因是存在同名組件？懷疑問(wèn)題在組件名上面，修改組件名為大寫Nav,頁(yè)面的warning解決。
參考鏈接：http://blog.csdn.net/qq_34645412/article/details/78846782
image.png - 頁(yè)面依舊空白，檢查main.js，加入
template:"<Nav/>",頁(yè)面正常顯示了Nav組件。但是控制臺(tái)waring重新出現(xiàn)
image.png
9.修改nav.vue中的name為navigator,同時(shí)修改main.js中引用的組件名，頁(yè)面無(wú)warning了。
也補(bǔ)充學(xué)習(xí)了其他webpack相關(guān)知識(shí)：
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/
修改后的項(xiàng)目地址：https://gitee.com/qiapi/vue-webpack.git
