【每日一题】webpack 如何利用 localStorage 离线缓存静态资源？

html-webpack-plugin 插件

在配置 webpack 时，我们可使用html-webpack-plugin来注入一段脚本到 html， 来实现第三方或者公用资源的静态化存储。
做法：在 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 的时候，也可以通过编辑文件流来实现静态化脚本的注入，来降低服务器的压力，提高性能。

自定义plugin

可以通过自定义 plugin 或者html-webpack-plugin等周期函数，动态注入前端代码，动态化存储 script。

所有《每日一题》的 知识大纲索引脑图 整理在此：https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转