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
  • 相关阅读:
    sqlserver2005转换到2000
    vs2008的注册
    给联想K46装系统
    两个调片技巧
    mapx集合的问题
    audio player播放多文件
    JQuery查询ul嵌套结构中当前所处的位置
    .Net中使用带UI的OCX的方法
    U盘启动和量产
    winrar的图标
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10192806.html
Copyright © 2011-2022 走看看