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

html-webpack-plugin 插件

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

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

webpack-mainfest-plugin

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

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

CI/CD 文件流

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

自定義plugin

可以通過自定義 plugin 或者html-webpack-plugin等周期函數(shù)，動態(tài)注入前端代碼，動態(tài)化存儲 script。

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