How to use the react-scripts/config/webpack.config function in react-scripts

const fs = require("fs-extra");
const chalk = require("react-dev-utils/chalk");
const webpack = require("webpack");
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
const paths = require("react-scripts/config/paths");
const configFactory = require("react-scripts/config/webpack.config");

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

const configDevelopment = configFactory("development");
const configProduction = configFactory("production");
const config = configDevelopment;
config.entry = configProduction.entry;
config.output.path = configProduction.output.path;
config.plugins = config.plugins.filter(
  p => p.constructor.name !== "HotModuleReplacementPlugin"
);

fs.emptyDirSync(paths.appBuild);
const compiler = webpack(config);
compiler.watch({ ignored: [paths.appNodeModules] }, (err, stats) => {
  let messages;
  if (err) {
    let errMessage = err.message;

    messages = formatWebpackMessages({
      errors: [errMessage],

require("react-scripts/config/env");

const fs = require("fs-extra");
const chalk = require("react-dev-utils/chalk");
const webpack = require("webpack");
const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles");
const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages");
const paths = require("react-scripts/config/paths");
const configFactory = require("react-scripts/config/webpack.config");

// Warn and crash if required files are missing
if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
  process.exit(1);
}

const configDevelopment = configFactory("development");
const configProduction = configFactory("production");
const config = configDevelopment;
config.entry = configProduction.entry;
config.output.path = configProduction.output.path;
config.plugins = config.plugins.filter(
  p => p.constructor.name !== "HotModuleReplacementPlugin"
);

fs.emptyDirSync(paths.appBuild);
const compiler = webpack(config);
compiler.watch({ ignored: [paths.appNodeModules] }, (err, stats) => {
  let messages;
  if (err) {
    let errMessage = err.message;

    messages = formatWebpackMessages({

module.exports = ({ config: storybookBaseConfig, mode }) => {
  storybookBaseConfig = rewireStorybook(storybookBaseConfig);
  craConfig = rewireCRA(craConfigBase('development'));

  // In the code below, we are going to get a couple
  // of loaders from CRA that we need for storybook.
  // This is to ensure storybook and our actual build
  // are as close as possible

  // a utility function to get a loader from CRA
  const getCRALoader = loaderName =>
    craConfig.module.rules
      .find(rule => rule.oneOf)
      .oneOf.find(r => {
        return r.loader && r.loader.includes(loaderName);
      });

  // the url loader allows loading of media
  const urlLoader = getCRALoader('url-loader');