webpack配置之后端渲染詳解
webpack配置之后端渲染2017年, vue, react, angular 已經(jīng)占據(jù)前端的主流, 不得不承認(rèn)這也是前端的未來(lái)發(fā)展方向. 但是后端渲染的開(kāi)發(fā)方式仍然很常見(jiàn), 不管是個(gè)人項(xiàng)目還是商業(yè)項(xiàng)目, 后端渲染搞起來(lái)真是糙猛快. 但是借著前端發(fā)展的東風(fēng), 后端渲染也有很大的改進(jìn)空間. 這里就介紹一下我自己的實(shí)踐經(jīng)驗(yàn): 前后端不分離的情況下實(shí)現(xiàn)熱加載以及一定程度下的前端主導(dǎo)開(kāi)發(fā). 這里以koa為例, 但是倉(cāng)庫(kù)里也有django版. 理論上所有語(yǔ)言都可以實(shí)現(xiàn). 有興趣可以看下, 倉(cāng)庫(kù)地址在文末.
效果圖
原理
原理說(shuō)起來(lái)還是很簡(jiǎn)單的:
1、獨(dú)立啟動(dòng)靜態(tài)資源服務(wù)器打包生成資源列表(manifest)
通過(guò)webpack-manifest-plugin插件生成manifest.json文件
new ManifestPlugin({
writeToFileEmit: true,
publicPath: 'http://localhost:5000/static/'
})
文件結(jié)果如圖:
服務(wù)器讀取資源列表加載到模板文件中
app.use(async (ctx, next) => {
const manifest = await fs.readFile(path.resolve(__dirname, 'assets/bundles/manifest.json'))
ctx.state = {
static: JSON.parse(manifest.toString())
}
await next()
})
這個(gè)中間件通過(guò)讀去manifest.json將資源列表掛載到ctx.state(模板變量)中, 之后就可以直接在模板中引用靜態(tài)資變量了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ title }}</title>
<link rel="stylesheet" href="{{static['test.css']}}" rel="external nofollow" >
</head>
<body>
<h1>Hello, World</h1>
<script src="{{static['test.js']}}"></script>
</body>
</html>
需要注意的是由于后端渲染的一般是多入口, 所以只需要在對(duì)應(yīng)的模板中引入需要的入口文件.
熱加載
熱加載其實(shí)也有很多解決方案: browsersync, live reload 等等, 但是這些都是full reload 只是減少了f5的頻率, webpack的熱加載就方便很多了通過(guò)websocket(具體我也不清楚), 配置起來(lái)也很簡(jiǎn)單.
在入口文件中加上
hot: 'webpack/hot/only-dev-server',
devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'
/**
完整版
entry: {
index: './assets/index.js',
test: './assets/test.js',
hot: 'webpack/hot/only-dev-server',
devServerClient: 'webpack-dev-server/client?http://0.0.0.0:5000'
},
*/
插件中加上: new webpack.HotModuleReplacementPlugin()
需要注意的有兩點(diǎn):
- extract-text-webpack-plugin 加上之后就無(wú)法hot reload, 開(kāi)發(fā)配置不要加上這個(gè)插件
- 根據(jù)webpack的文檔, 每個(gè)入口文件都需要加上下面一段代碼才能實(shí)現(xiàn) js的hot reload
if (module.hot) {
module.hot.accept()
}
完整配置和代碼這里就不貼了, 倉(cāng)庫(kù)地址(django部分代碼在master分支): https://github.com/xiadd/wepack-mutipage
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了有關(guān)iframe的實(shí)用操作，包括高度、傳遞數(shù)據(jù)等等，感興趣的朋友可以參考下2014-04-04
這篇文章主要介紹了深入淺析JavaScript中的scrollTop的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JavaScript接口防止重復(fù)請(qǐng)求的方法總結(jié)
在前端開(kāi)發(fā)中,防止重復(fù)請(qǐng)求是一個(gè)常見(jiàn)的問(wèn)題,重復(fù)請(qǐng)求不僅會(huì)增加服務(wù)器的負(fù)載,還可能導(dǎo)致數(shù)據(jù)不一致等問(wèn)題,本文為大家整理了一些常用的解決方法,需要的可以參考下2024-12-12
uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法
在uniapp的開(kāi)發(fā)中用過(guò)彈窗的都知道有個(gè)bug就是滑動(dòng)彈窗的內(nèi)容底部頁(yè)面也會(huì)跟著滑動(dòng),所以這篇文章主要給大家介紹了關(guān)于uniapp禁止遮罩層下頁(yè)面滾動(dòng)的解決方法,需要的朋友可以參考下2023-09-09
一個(gè)javascript參數(shù)的小問(wèn)題
2008-03-03
詳解JavaScript前端如何有效處理本地存儲(chǔ)和緩存
前端本地存儲(chǔ)和緩存的處理是一種重要的技術(shù),它可以幫助改善應(yīng)用程序的性能和用戶體驗(yàn),下面是小編整理的一些處理前端本地存儲(chǔ)和緩存的常用方法,希望對(duì)大家有所幫助2023-11-11
JS 遮照層實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
變量對(duì)象是與執(zhí)行上下文相關(guān)的數(shù)據(jù)作用域，存儲(chǔ)了在上下文中定義的變量和函數(shù)聲明，本文主要介紹了JavaScript?變量對(duì)象，具有一定的參考價(jià)值，感興趣的可以了解一下2022-05-05
JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記（十六） javascript檢測(cè)瀏覽器和操作系統(tǒng)-detect.js
javascript檢測(cè)瀏覽器和操作系統(tǒng) detect.js使用介紹，需要的朋友可以參考下2012-08-08