溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

webpack配置之后端渲染的示例分析

發(fā)布時(shí)間：2021-07-28 10:37:29 來源：億速云 閱讀：98 作者：小新 欄目：web開發(fā)

這篇文章主要介紹webpack配置之后端渲染的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

效果圖

webpack配置之后端渲染的示例分析

原理

原理說起來還是很簡(jiǎn)單的:

1、獨(dú)立啟動(dòng)靜態(tài)資源服務(wù)器打包生成資源列表(manifest)

通過webpack-manifest-plugin插件生成manifest.json文件

new ManifestPlugin({
  writeToFileEmit: true,
  publicPath: 'http://localhost:5000/static/'
})

文件結(jié)果如圖:

webpack配置之后端渲染的示例分析

服務(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è)中間件通過讀去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>
 <h2>Hello, World</h2>
 
 <script src="{{static['test.js']}}"></script>
</body>
</html>

需要注意的是由于后端渲染的一般是多入口, 所以只需要在對(duì)應(yīng)的模板中引入需要的入口文件.

熱加載

熱加載其實(shí)也有很多解決方案: browsersync, live reload 等等, 但是這些都是full reload 只是減少了f5的頻率, webpack的熱加載就方便很多了通過websocket(具體我也不清楚), 配置起來也很簡(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):

  1. extract-text-webpack-plugin 加上之后就無法hot reload, 開發(fā)配置不要加上這個(gè)插件

  2. 根據(jù)webpack的文檔, 每個(gè)入口文件都需要加上下面一段代碼才能實(shí)現(xiàn) js的hot reload

if (module.hot) {
 module.hot.accept()
}

以上是“webpack配置之后端渲染的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手