web-dev-qa-db-fra.com

Comment puis-je ajouter le CopyWebpackPlugin pour créer-réagir-application sans éjecter?

Je construis une application de réaction et Je veux copier tous les fichiers image de la destination source vers la destination de construction Je suis des tutoriels et jusqu’à présent, j’ai réussi à utiliser react-app-wired et la CopyWebpackPlugin

Je ne reçois aucune erreur et aucun fichier n'est copié.

C'est mon 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;
};

C'est mon 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"
  }
}

Ma structure de dossier est

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

reactjsnpmwebpack
4
TheBlackBenzKid

En supposant que vous souhaitiez simplement déplacer des fichiers de -/src/<somewhere> à ./<somewhereElse> à construire heure.

Vous pouvez simplement ajouter une étape supplémentaire à votre script build dans package.json. L'étape ci-dessous est entièrement sous votre contrôle et ne gâche aucun script ou configuration create-react-app.

Par exemple, j’ai utilisé ncppackage , mais si vous souhaitez un contrôle plus granulaire, vous pouvez également créer votre propre "étape" avec ncp ou même avec un noeud brut fs api. 

Voici un moyen de reproduire ce que j'ai fait: 

Installer

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

Données de test Créer la structure de dossier src/images/et mettre dans les fichiers

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

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

Package.json

J'ai seulement édité la partie: "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: Avant d'exécuter la compilation: 

ls public
favicon.ico  index.html  manifest.json

Après avoir exécuté le 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 Je suppose que vous avez finalement besoin de ces fichiers dans le répertoire build. Si c'est le cas, vous pouvez simplement changer votre script build. 

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

Ainsi, vous ne polluerez pas votre dossier public, que vous voudrez peut-être conserver dans votre contrôle de source.

4
dubes

Il est déconseillé de modifier le fichier node_modules/react-scripts/config/webpack.config.dev.js car cela casserait lors de la mise à jour de ce paquetage particulier. De plus, il est probable que node_modules soit ignoré dans votre système de contrôle de version, ce qui signifie que cette configuration ne sera pas partagée par les développeurs ni sauvegardée.

Même si je n'ai pas essayé personnellement, vous pouvez utiliser quelque chose comme ceci: https://github.com/timarney/react-app-rewired pour remplacer la configuration Webpack.

Vous pouvez consulter le didacticiel ici: https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39

5
ajaybc

Je pense que le problème vient du fait que vous utilisez webpack-dev-server avec copy-webpack-plugin. Si cela est vrai, le copy-webpack-plugin copiera les fichiers dans le répertoire virtuel dans lequel webpack-dev-server fonctionne. Alors que, dans cette situation, vous devez ajouter un plugin supplémentaire pour y arriver

Si vous voulez que webpack-dev-server écrive des fichiers dans le répertoire de sortie pendant le développement, vous pouvez le forcer avec le write-file-webpack-plugin.

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

config webpack:

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

Vous pouvez visiter le document officiel pour plus d'informations: https://webpack.js.org/plugins/copy-webpack-plugin/

J'espère que ça marche!

1
Dat Tran