Watch webpack in production environment with create-react-app (react-scripts)

README.md

This configuration works with maven spring framework.

This requires react-app-rewired as dev dependency.

Build script stays as is, add a watch script that will trigger config-overrides using react-app-rewired and it will watch webpack.

{
"scripts": {
    "build": "react-scripts build",
    "watch": "react-app-rewired build"
  }
}

config-overrides.js

const webpack = require('webpack');
const { paths } = require('react-app-rewired');
const fs = require('fs-extra');
const path = require('path');

module.exports = function override(config, env) {
  console.log('Rewiring in environment:', env);

  config.devtool = 'inline-source-map';

  config.entry = config.entry.filter(entry => !entry.includes('webpackHotDevClient'));

  webpack(config).watch({}, function(err, stats) {
    copyPublicFolder();
    var d = new Date();
    console.log('Generated New Source: ' + d.toLocaleTimeString());
  });
  return config;
};

function copyPublicFolder() {
  fs.copySync(paths.appBuild, path.join(__dirname, '../../../target/classes/static'), {
    dereference: true,
    filter: file => file !== paths.appHtml
  });
}