【每日一題】webpack 如何利用 localStorage 離線緩存靜態(tài)資源？

html-webpack-plugin 插件

在配置 webpack 時(shí)，我們可使用html-webpack-plugin來注入一段腳本到 html， 來實(shí)現(xiàn)第三方或者公用資源的靜態(tài)化存儲(chǔ)。
做法：在 html 中注入一段標(biāo)識(shí)，例如<% HtmlWebpackPlugin.options.loading.html %>，在html-webpack-plugin中即可通過配置 html 屬性，將 script 注入進(jìn)去。

文檔: https://webpack.docschina.org/plugins/html-webpack-plugin/

webpack-mainfest-plugin

通過配置webpack-mainfest-plugin，生成 mainfest.json 文件用來對比 js 資源的差異，做到是否替換，當(dāng)然也要寫緩存 script。

NPM: https://www.npmjs.com/package/webpack-manifest-plugin

CI/CD 文件流

在我們做 CI/CD 的時(shí)候，也可以通過編輯文件流來實(shí)現(xiàn)靜態(tài)化腳本的注入，來降低服務(wù)器的壓力，提高性能。

自定義plugin

可以通過自定義 plugin 或者h(yuǎn)tml-webpack-plugin等周期函數(shù)，動(dòng)態(tài)注入前端代碼，動(dòng)態(tài)化存儲(chǔ) script。

所有《每日一題》的 知識(shí)大綱索引腦圖 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以點(diǎn)擊文末的 “閱讀原文” 快速跳轉(zhuǎn)