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

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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

 

以上是关于[React] Override webpack config for create-react-app without ejection的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 不会将我使用的图像复制到反应组件中

react学习(35)----getFieldDecorator will override value

使用webpack搭建react项目 webpack-react-project

创建react项目并配置webpack

react+webpack+scss 怎么编译css独立文件

React开发环境搭建(react,babel,webpack webpack-dev-server)