create react app - Making webpack and CRA emit files in watch mode

Question

I'm, trying to make CRA's start script to emit files on changes instead of keeping them in memory.

I'm working to implement Google Chrome Extension so I need files to be flushed to the file system so that Chrome could pick them up. And building each change is not as convenient as an automatic compilation.

I've tried to use react-app-rewired to override a bunch of props in webpack config, including mode, watch, and to see 'output.path' but no luck so far.

Or CRA's 'start' script will never emit underlying because the loaders are not tuned to do that?

Appreciate your help!

question from:https://stackoverflow.com/questions/65941637/making-webpack-and-cra-emit-files-in-watch-mode

Answer 1

You may need CRACO.

Create React App Configuration Override is an easy and comprehensible configuration layer for create-react-app.

$ npm install @craco/craco --save

Create a craco.config.js file in the root directory and configure CRACO:

my-app
├── node_modules
├── craco.config.js
└── package.json

Update package.json:

/* package.json */

"scripts": {
-   "start": "react-scripts start",
+   "start": "craco start",
-   "build": "react-scripts build",
+   "build": "craco build"
-   "test": "react-scripts test",
+   "test": "craco test"
}

Finally, edit craco.config.js file:

module.exports = {
  devServer: (devServerConfig) => {
    devServerConfig.writeToDisk = true;
    return devServerConfig;
  },
};