新聞中心
隨著前端體積越來越大,功能越來越豐富,這時(shí)候就需要將前端工程化,而webpack就是用于將前端各種文件打包起來。一個(gè)簡(jiǎn)單的webpack應(yīng)該包含以下幾個(gè)概念
- 入口起點(diǎn)
- 輸出
- 配置
- 組件
- 加載器
- 插件
- 模塊
- 模塊熱替換
適用情況
首先說明,此情況不具備普遍性。若你的情況與筆者類似那么希望這篇文章能夠幫到你。
我的項(xiàng)目情況是這樣的:用node.js做后臺(tái),ejs做模板引擎(即整個(gè)頁面是一個(gè)ejs文件)由node.js將數(shù)據(jù)渲染完成后,再將完整頁面返回給用戶。
那么這樣做會(huì)遇到的問題:
1. 本項(xiàng)目沒有html頁面,ejs的作用也不是引入公共的組件,直接就是一個(gè)完整的頁面,用webpack中處理ejs文件的loader返回的是一個(gè)函數(shù),故會(huì)產(chǎn)生問題
2.由于node.js配置了靜態(tài)資源目錄public,而視圖目錄與之同級(jí),webpack在處理圖像等靜態(tài)資源目錄的路徑的時(shí)候會(huì)產(chǎn)生問題
3.如果使用publicpath 那么nodejs在運(yùn)行的時(shí)候就會(huì)找不到資源,因?yàn)樵O(shè)置了靜態(tài)資源的目錄
如果你也遇到了類似的問題,希望你能在本文中找到解決方法。
這里多說一句:不要覺得我的項(xiàng)目很奇怪,因?yàn)槲耶?dāng)時(shí)寫的時(shí)候,知識(shí)儲(chǔ)備不足,等到后面發(fā)現(xiàn)不妥的時(shí)候,為時(shí)已晚。
改起來太麻煩,所以將錯(cuò)就錯(cuò)了。。。。。。
解決方案
1.處理ejs
我在各個(gè)論壇,官網(wǎng)搜尋良久,始終沒能找到,能處理我這種情況的loader。
沒有辦法之下,只能換一個(gè)思路,將ejs文件先轉(zhuǎn)為html
首先要修改文件,那么就要修改服務(wù)器的模板引擎(這里是我的app.js)
那么要修改成什么呢?我要讓nodejs使用ejs模板引擎,但是使用html文件來渲染
這里我們要用的是express中的app.engine 來注冊(cè)一個(gè)引擎
代碼如下:
app.set('views',path.join(__dirname,'views'));//設(shè)置模板引擎的目錄 app.engine('html', require('ejs').renderFile); app.set('view engine','html');
當(dāng)前名稱:詳解webpack打包nodejs項(xiàng)目(前端代碼)-創(chuàng)新互聯(lián)
本文地址:http://www.ef60e0e.cn/article/djjhso.html