How can I add the CopyWebpackPlugin to create-react-app without ejecting?

It is definitely not recommended to modify the node_modules/react-scripts/config/webpack.config.dev.js file as this will break when this particular package is updated. Also most probably you would be having node_modules ignored in your version control system, meaning this config wont be shared across developers or backed up.

Although I haven't tried myself personally you could use something like this : https://github.com/timarney/react-app-rewired to override the Webpack config.

You can have a look at the tutorial here : https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39


Assuming you just want to move files from -/src/<somewhere> to ./<somewhereElse> at build time.

You could just add an extra step to your build script in package.json. The step below is completely in your control and does not mess with any create-react-app scripts or configuration.

For example, I used the ncp package, but if you want more granular control, you can also create your own "step" with ncp or even with raw node fs api.

Here is a way to replicate what I did:

Setup

npx create-react-app img-upload
cd img-upload/
yarn add --dev ncp

Test Data create src/images/ folder structure and put in files

ls -R src/images/
src/images/:
badge.jpg  folder1

src/images/folder1:
applause.gif  blank.png

Package.json

I only edited the part: "build": "ncp './src/images' './public/images' && react-scripts build",

{
  "name": "img-upload",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "ncp './src/images' './public/images' &&  react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "ncp": "^2.0.0"
  }
}

Test: Before running build:

ls public
favicon.ico  index.html  manifest.json

After running build: yarn build

ls public
favicon.ico  images  index.html  manifest.json

ls -R public/images
public/images/:
badge.jpg  folder1

public/images/folder1:
applause.gif  blank.png

ls build
asset-manifest.json  favicon.ico  images  index.html  manifest.json  service-worker.js  static

ls -R build/images
build/images/:
badge.jpg  folder1

build/images/folder1:
applause.gif  blank.png

Suggestion I am assuming you ultimately need these files in build directory. If so, you can just switch your build script.

"build": "react-scripts build && ncp './src/images' './build/images'",

That way you won't pollute your public folder, which you may want to keep in your source control.