Create React App does not provide watching build mode oficially (#1070).
This script provides watching build mode for an external tool such as Chrome Extensions or Firebase app.
Create a React app.
Put the script into scripts/watch.js
.
Add watch
task into the scripts block in package.json
as follows:
"scripts": {
"start": "react-scripts start",
// Add next line
"watch": "node scripts/watch.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
Run the watch
task.
npm run watch
Change source code and check build
output.
Directory structure may be following:
app/
src/
public/
scripts/
watch.js
(need to add)
package.json
(need to modify)build/
(output)
The script no longer works with CRA 4.0.0. This did the trick for us:
Replace
config.entry.shift();
with:This removes both the HMR plugin as previously, as well as the ReactRefreshPlugin which seems to have been added in the new version (which causes errors to be printed in the browser's console if left there).