React-app-rewired: add webpack plugin

[lyudad]

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  ]
};

this what I have used in webpack. I can't find way to use webpack plugin with rewired

[dawnmist]

Creating a config-overrides.js file in your project's root directory with the following content should work:

/* config-overrides.js */
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = function override(config, env) {
  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  );
  return config;
}

The config variable is the default webpack config variable created by react-scripts. You want to merge your changes into the existing configuration.

Then make sure that you update your scripts section in your package.json file so that it uses react-app-rewired for the build and start scripts as per the instructions in the Readme.

[Khaleel]

I tried this but it is not working for me.

[christiansaiki]

@Khaleel did you manage to get it working?

[Khaleel]

No. However I worked another solution from stack which was helpful. Here is the link

https://stackoverflow.com/questions/51923251/how-can-i-add-the-copywebpackplugin-to-create-react-app-without-ejecting

[ryoldash]

I had issue about copying IIFE containing javascript file to dist folder. react-app-rewired and CopyWebpackPlugin worked for me.

You can check the following repository for the solution:
https://github.com/ryoldash/cra-webpack-config

[bilo-io]

So, I normally don't use CRA, but rather start off with a custom webpack.config.js 🤷 .

In my case I just needed basic behaviour (i.e. writing a .json file ) so I read webpack's docs and just wrote my own plugin in a few minutes 🤷.

Reference: Webpack - Writing Plugins

That said, using CRA and react-app-rewired I also ran into this issue.

NOTE:

• I didn't use the additional dependency customize-cra to get this working.
• I had use a specific version of [email protected] , which needed to be locked to the version CRA depended on.

package.json

    "resolutions": {
        "webpack": "4.42.0"
     }

I got plugins to work ... well kind of. I was using the webpack.DefinePlugin to define global variables at build time.

However, I had no luck outside of using webpack's built in plugins, hence the custom plugin.

Plugin definition

scripts/write-json-webpack-plugin.js:

class WriteJsonWebpackPlugin {
    constructor(filename = 'build/version.json', options = {}) {
        this.filename = filename;
        this.options = options;
    }
    apply(compiler) {
        compiler.hooks.done.tap('Version Webpack Plugin', (
            stats
        ) => {
            fs.writeFileSync(this.filename, JSON.stringify({
                ...this.options
            }, false, 4))
        })
    }
}

Plugin usage

config-overrides.js:

const WriteJsonPlugin = require('./scripts/write-json-webpack-plugin')

// ...

module.exports = config => {

// ...

    return {
        ...config,
        plugins: [
            ...config.plugins,
            new webpack.DefinePlugin({
                APP_TEST: 'Hello World'
            }),
            // NOTE: this assumes your output directory is 'build'
            new WriteJsonPlugin('build/test.json', {
                appTest: 'Hello World'
            })
        ]
    }
}

Hope this helps anyone else encountering this issue.