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",     ...   } }