webpack配置之後端渲染

05-15

2017年, vue, react, angular 已經佔據前端的主流, 不得不承認這也是前端的未來發展方向. 但是後端渲染的開發方式仍然很常見, 不管是個人項目還是商業項目, 後端渲染搞起來真是糙猛快. 但是借著前端發展的東風, 後端渲染也有很大的改進空間. 這裡就介紹一下我自己的實踐經驗: 前後端不分離的情況下實現熱載入以及一定程度下的前端主導開發. 這裡以koa為例, 但是倉庫里也有django版. 理論上所有語言都可以實現. 有興趣可以看下, 倉庫地址在文末.

效果圖

原理

原理說起來還是很簡單的:

獨立啟動靜態資源伺服器打包生成資源列表(manifest)

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

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

文件結果如圖:

伺服器讀取資源列表載入到模板文件中

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()})

這個中間件通過讀去manifest.json將資源列表掛載到ctx.state(模板變數)中, 之後就可以直接在模板中引用靜態資變數了

<!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]}}"></head><body> <h1>Hello, World</h1> <script src="{{static[test.js]}}"></script></body></html>

需要注意的是由於後端渲染的一般是多入口, 所以只需要在對應的模板中引入需要的入口文件.

熱載入

熱載入其實也有很多解決方案: browsersync, live reload 等等, 但是這些都是full reload 只是減少了f5的頻率, webpack的熱載入就方便很多了通過websocket(具體我也不清楚), 配置起來也很簡單.

在入口文件中加上

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()

需要注意的有兩點:

extract-text-webpack-plugin 加上之後就無法hot reload, 開發配置不要加上這個插件
根據webpack的文檔, 每個入口文件都需要加上下面一段代碼才能實現 js的hot reload

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

完整配置和代碼這裡就不貼了, 倉庫地址(django部分代碼在master分支): github.com/xiadd/wepac…

原文地址: github.com/xiadd/blog/…