gpt4 book ai didi

reactjs - 如何将 CopyWebpackPlugin 添加到 create-react-app 而不弹出?

转载 作者:行者123 更新时间:2023-12-03 13:28:47 34 4
gpt4 key购买 nike

我正在构建一个 React 应用程序,我想将所有图像文件从源目标复制到构建目标。我正在遵循一些教程,到目前为止已成功使用 react-app-wiredCopyWebpackPlugin

我没有收到任何错误,也没有复制任何文件。

这是我的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;
};

这是我的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"
}
}

我的文件夹结构是


源代码/图像
src/images/file.jpg
src/images/slider/1.png
src/images/slider/2.png
到目前为止,公共(public)/图像(空)

最佳答案

假设您只想从 -/src/<somewhere> 移动文件至./<somewhereElse>构建时。

您只需在 build 中添加一个额外的步骤即可package.json 中的脚本。下面的步骤完全由您控制,不会干扰任何 create-react-app 脚本或配置。

例如,我使用了 ncp package ,但如果您想要更精细的控制,您还可以使用 ncp 甚至原始节点 fs api 创建自己的“步骤”。

这是一种复制我所做的事情的方法:

设置

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

测试数据创建 src/images/文件夹结构并放入文件

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

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

Package.json

我只编辑了部分:"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"
}
}

测试:运行构建之前:

ls public
favicon.ico index.html manifest.json

运行构建后: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

建议我假设您最终需要 build 中的这些文件目录。如果是这样,您只需切换您的 build脚本。

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

这样您就不会污染您的公用文件夹,您可能希望将其保留在源代码管理中。

关于reactjs - 如何将 CopyWebpackPlugin 添加到 create-react-app 而不弹出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51923251/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com