[React] Override webpack config for create-react-app without ejection
2023-09-14 08:59:16 时间
The default service worker that comes with create-react-app doesn't allow for very much configuration. We'll replace that default service worker in two ways.
First, we'll create a blank service worker js file, and use that as our custom service worker.
Next, we'll re-write the default webpack config with react-app-rewired
, and utilize the InjectManifest
workbox webpack plugin. This will allow us to create a totally custom service worker that still allows us to use workbox, without ejecting our app.
Install:
"react-app-rewired": "^1.6.2", "react-scripts": "^2.1.1", "serve": "^10.1.1", "workbox-webpack-plugin": "^3.6.3"
Create a config-overrides.js in root folder:
Default create-react-app using 'GenerateSW' function, we want to override with 'InjectManifest' function.
/* config-overrides.js */ const WorkboxWebpackPlugin = require('workbox-webpack-plugin') module.exports = function override(config, env) { config.plugins = config.plugins.map(plugin => { if(plugin.constructor.name === 'GenerateSW') { return new WorkboxWebpackPlugin.InjectManifest({ swSrc: './src/sw.js', // point to the sw.js file we will create later swDest: 'service-worker.js' // will be generatedin pulbic folder }) } return plugin }) return config }
Update package.json:
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "build:serve": "serve -s build", "test": "react-app-rewired test", "eject": "react-scripts eject" },
Create src/sw.js:
workbox.skipWaiting();
workbox.clientsClaim();
Run:
npm run build
相关文章
- uni-app APP地图移动时获取地图中心点经纬度坐标
- create-react-app 设置webpack alias
- App逆向 Frida - 夜神模拟器安装配置 基本使用
- 第129期:flutter布局和开发响应式app的方案
- java基于springboot外卖系统在线订餐系统app源码厨艺论坛APP
- 2018最新苹果APP上架App Store流程(超详细)
- 如何使用flask的 @app.after_request 装饰器
- Application Loader及Transporter App上传ipa外、可以在Windows上架iOS APP工具
- Application Loader及Transporter App上传ipa外、可以在Windows上架iOS APP工具
- 开发好APP了如何上架apple store市场?
- uniapp打包ios app所需的证书的制作流程
- 上传iOS应用变得更加容易 - 在Windows上架iOS APP的工具介绍
- 苹果证书(免费) + 打包ipa + 上传app store
- windows系统下上传ipa文件到App Store
- 工信部关于侵害用户权益行为的App通报:尚有71款App未完成整改
- 安卓APP配合MSSQL强势发力,创新移动应用体验(安卓app mssql)
- 肯德基APP上乘体验Redis助力(肯德基app redis)
- APP构建MySQL数据库无缝连接(app连接mysql)
- 让App连接MySQL轻松实现数据库连接(app连mysql)
- App远程连接MySQL的实现方式(app远程连接mysql)
- App测试技术利用Mysql助力质量保障(app测试mysql)
- App中数据库优势之MySQL(app数据库mysql)
- APP如何连接MySQL数据库(app怎样链接mysql)
- 掌握App接入MySQL的技术(app如何接入mysql)
- App与MySQL数据库构建坚固的联系(app和mysql数据库)
- 学习MYSQL必备下载一款视频APP,轻松入门数据库技术(MYSQL下载视频app)
- MYSQL数据库助力下载电影App,高效运转数据管理系统(MYSQL下载电影app)
- 实现安卓App快速定制Redis整合安卓实战(安卓整合redis实战)
- App与Oracle融合,拥抱数据驱动未来(app与oracle)
- 开发Redis在APP开发中的应用(redis进行app)
- 央视曝山寨理财App 诈骗套路 :微信群投资不挣钱反倒赔10万