zoukankan      html  css  js  c++  java
  • [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.

    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
  • 相关阅读:
    ruby 实现java中的aes 加密解密
    移动端手机端web页面中背景图固定问题
    hooks 组件对应的生命周期
    React 生命周期函数总结
    Sequelize 常用增删改查函数
    如何验证SSH的连通性
    如何生成SSH密钥
    如何查看本机ssh秘钥
    如何更改本地代码仓库指向
    如何发布npm 包
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10192806.html
Copyright © 2011-2022 走看看