詳解webpack打包nodejs項(xiàng)目(前端代碼)-創(chuàng)新互聯(lián)

隨著前端體積越來越大，功能越來越豐富，這時(shí)候就需要將前端工程化，而webpack就是用于將前端各種文件打包起來。一個(gè)簡(jiǎn)單的webpack應(yīng)該包含以下幾個(gè)概念

公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、微信公眾號(hào)開發(fā)、購物商城網(wǎng)站建設(shè)，微信平臺(tái)小程序開發(fā)，軟件定制網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)公司更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。
  • 入口起點(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');

分享文章：詳解webpack打包nodejs項(xiàng)目(前端代碼)-創(chuàng)新互聯(lián)
轉(zhuǎn)載源于：http://www.muchs.cn/article30/djjhso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、網(wǎng)站維護(hù)、App設(shè)計(jì)、網(wǎng)站收錄、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營