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

create-react-app webpack config without ejecting
create-react-app config file
extend create-react-app
customize-cra
cra eject
react-app-rewired test coverage
how to customize create-react-app
create-react-app es6

I am building a react application and I want to copy all image files from the source destination to the build destination. I am following some tutorials and so far managed to use react-app-wired and the CopyWebpackPlugin

I am getting no errors and no files are being copied.

This is my 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: 'src/images',
        to: 'public/images'
      }
    ])
  );
  return config;
};

This is my package.json

{
  "name": "public",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "copy-webpack-plugin": "^4.5.2",
    "css-loader": "^1.0.0",
    "prop-types": "^15.6.2",
    "react": "^16.4.2",
    "react-app-rewired": "^1.5.2",
    "react-axios": "^2.0.0",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "react-slick": "^0.23.1",
    "slick-carousel": "^1.8.1",
    "typeface-montserrat": "0.0.54",
    "webfontloader": "^1.6.28"
  },
  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start-js": "react-app-rewired start",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "react-app-rewired build",
    "build": "npm-run-all build-css build-js",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.3",
    "style-loader": "^0.22.1"
  }
}

My folder structure is

src/images src/images/file.jpg src/images/slider/1.png src/images/slider/2.png public/images (empty) so far

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.

Don't eject your Create React App - versett, How can I add the CopyWebpackPlugin to create-react-app without ejecting? - reactjs. Create React App comes with a great config out of the box, and it has the “eject” feature for when you want to take the config into your own hands. But what if you just want to add a couple little tweaks to the Webpack config without having to keep the entire config up to date by yourself? You might want to add SASS or SCSS support or use your own .eslintrc file.

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

Getting Started with Create React App, , take the time to ensure you aren't making extra work for yourself or repeating the work someone else has done previously. react-app-rewired. Since we have created our project with create-react-app package we can’t simply modify webpack.config.json file. In order to achieve our goal we will use react-app-rewired

I think the problem is because you are using webpack-dev-server together with copy-webpack-plugin. If that's true, the copy-webpack-plugin will copy files to virtual directory which webpack-dev-server works. So that, In this situation, you need to add one more plugin to make it happen

If you want webpack-dev-server to write files to the output directory during development, you can force it with the write-file-webpack-plugin.

import WriteFilePlugin from 'write-file-webpack-plugin';

webpack config:

config.plugins.push(
    new CopyWebpackPlugin(
    [
      {
        from: 'src/images',
        to: 'public/images'
      }
    ])
  );
config.plugins.push(new WriteFilePlugin());

You can visit the official document for more information: https://webpack.js.org/plugins/copy-webpack-plugin/

Hope this works!

What happens when you eject Create React App · satendra02/react , build will still work, but they will point to the copied scripts so you can tweak them. So if you want to customize anything, you have to run npm run eject which gives you full freedom and copies configs to your project folder. The downside is that you won't get automatic updates and enhancements to Create React App curated configuration that we are working on.

Customize webpack configuration of React App created with Create , So let's start the journey of configuring create-react-app webpack.config.js. I was feeling happy that without importing any module in my tsx documents, webpack will npm install -D copy-webpack-plugin "eject": "react-scripts-ts eject" Ejecting is a real shame for any instance of create-react-app, so I found a way to use webpack-bundle-analyzer without ejecting. Hopefully this will save someone out there from having to eject to make this addition.

add webpack plugin · Issue #184 · timarney/react-app-rewired · GitHub, know how to solve without ejecting: I want to include Monaco Editor a Webpack plugin copy-webpack-plugin to your webpack.config.js. The benefits of not ejecting are that you’ll get updates to create-react-app and custom-react-scripts in the future by just updating those two dependencies, and your project can remain the same.

facebook/create-react-app, Ejecting CRA(create-react-app) always to configure webpack has been a challenge even to the pro devs. Since, i'm a noob i wanted to find out a  A lot of people come to this page with the goal of finding the webpack config and files in order to add their own configuration to them. Another way to achieve this without running npm run eject is to use react-app-rewired. This allows you to overwrite your webpack config file without ejecting.

Comments
  • Simply you may have to do something like in ant.design/docs/react/use-with-create-react-app advanced guides
  • Questions:1. Do you need to use webpack plugin for this? can you not add a script to build in package.json? 2. Are you using CRA or react-app-rewired? Question title says CRA, but code says react-app-rewired. 3. CRA should put all the images by default in build/static/media does that path not work for you?
  • Just watched a video tutorial a few days back, maybe this can help(not sure if you'll need a membership for watching this)? egghead.io/lessons/…
  • @dubes I think you need to do import image1 from './component/file.jpg in order for that to work and that it compressed and attaches a random name to it
  • I've found it much easier to deal with config idiosyncrasies like this after ejecting the project from create-react-app, so that actually may be the best way to go. create-react-app is only intended as a starting point, not as the canonical React configuration for the project throughout its entire life.
  • I ended up adding this in start and build but I did "ncp": "ncp src/images public/images" and just added ncp as a reference. Is there any way to watch the folder during development? Otherwise I have to kill node each time and run npm start or npm build
  • I've a few ideas, but it depends on what you're trying to achieve. I'll need to understand your flow a bit more. Let's try and start a chat tomorrow.
  • Just a way that npm will watch and always copy to the image folder making sure if I rename, it renames, if I delete, it deletes - complete sync real time watch
  • I'm looking for ways that can be done. One other train of thought: Can you not keep them in the public folder alone? How are you importing these images in your react component?
  • I am just using <img src='/images/file.jpg'/> before I was writing them as import but when you have huge sliders or big image content then I decided to directly call them. I also have an axios JSON API which links the images like inside of those variables and objects
  • Thanks for the answer so far, I updated my question and so far managed to get the plugin architecture and file prep ready but no files being copied or errors being produced.