Custom output name based on package name and version when building

[Vadorequest]

Is there a way of customizing the output file when running the build command?

cross-env REACT_APP_NAME=$npm_package_name REACT_APP_VERSION=$npm_package_version react-app-rewired build this is what I'm doing now but it generates a main.c3jfhd.js, I'd rather like a different name, can I customize it somehow?

Thanks.

[timarney]

Can't support config questions here:

Maybe:
https://github.com/webpack/docs/wiki/configuration#configuration-object-content

[Vadorequest]

@timarney Thanks.

By reading both that link and your own documentation I finally figured it out.

/* config-overrides.js */

const version = require('./package.json').version;
const buildFileName = `simulator-v${version}`;

module.exports = function override(config, env) {
  // Change the JS output file name and path, from 'static/js/[name].[contenthash:8].js' to `static/${buildFileName}.js`
  config.output = {
    ...config.output,
    filename: `static/${buildFileName}.js`,
  };

  // Change the CSS output file name and path, from 'static/css/[name].[contenthash:8].css' to `static/${buildFileName}.css`
  config.plugins.map((plugin, i) => {
    if (plugin.filename && plugin.filename.includes('static/css')) {
      config.plugins[i].filename = `static/${buildFileName}.css`;
    }
  });


  console.log('Additional config was applied through config-overrides.js');

  return config;
};

I suggest you add this to the readme, because I noticed several people were asking for this and I couldn't find a proper answer.

Also, my fix is kind of a workaround, may break depending on plugins (I don't know a proper way of identifying a plugin, to replace the file name of the generated CSS file)

[AlySeoudi]

@Vadorequest not sure if this totally solves the issue as I faced two problems with this solution

1. the old chunks was still getting created
2. there was no effect on the css files he never entered the if condition
   I reached this solution that may help and I thought about sharing it here

/* config-overrides.js */
module.exports = function override(config, env) {
config.output={
...config.output,
filename: 'static/js/[name].index_bundle.js',
chunkFilename: 'static/js/[name].index_bundle.js'
}
config.plugins.map((plugin, i) => {
if (plugin.options && plugin.options.filename && plugin.options.filename.includes('static/css')) {
config.plugins[i].options={
...config.plugins[i].options,
filename : static/css/index_bundle.css,
chunkFilename : static/css/index_bundle.css
}
}
});
console.log('Additional config was applied through config-overrides.js');
return config;
}