[React] Override webpack config for create-react-app without ejection

枕上诗书闲处好，门前风景雨来佳。这篇文章主要讲述[React] Override webpack config for create-react-app without ejection相关的知识，希望能为你提供帮助。
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.
【[React] Override webpack config for create-react-app without ejection】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: