reactjs - Generate single physical javascript file using create-react-app

Question

This is perhaps a newbie question. I have created a small reactjs app using create-react-app and I see that the bundle.js file is being served from http://localhost:3000/static/js/bundle.js. However, I do not see a physical "bundled" javascript file on my machine. How can I generate a physical bundled javascript file so I can "register" it in my wordpress php code? I'm building a small wordpress plugin that will use reactjs on the client side. Am I missing something obvious?

Answer 1

An alternative solution, as suggested here, is to use the rewire package to manipulate Create React App's webpack config, e.g.

Create a new file scripts/build.js

// npm install rewire
const rewire = require('rewire');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const defaults = rewire('react-scripts/scripts/build.js');
const config = defaults.__get__('config');

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = 'static/js/[name].js';
// CSS remove MiniCssPlugin
config.plugins = config.plugins.filter(plugin =>
    !(plugin instanceof MiniCssExtractPlugin));
// CSS replaces all MiniCssExtractPlugin.loader with style-loader
config.module.rules[2].oneOf = config.module.rules[2].oneOf.map(rule => {
    if (!rule.hasOwnProperty('use')) return rule;
    return Object.assign({}, rule, {
        use: rule.use.map(options => /mini-css-extract-plugin/.test(options.loader)
            ? {loader: require.resolve('style-loader'), options: {}}
            : options)
    });
});

Edit package.json

{
  "scripts": {
    ...
    "build": "npx ./scripts/build.js",
    ...
  }
}