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
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é ncp
package , 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.
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
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!