我正在构建反应应用程序,并且我想将所有图像文件从源目标复制到构建目标。我正在关注一些教程,到目前为止已成功使用react-app-wired
和CopyWebpackPlugin
我没有任何错误,也没有文件被复制。
这是我的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
src/images/file.jpg
src/images/slider/1.png
src/images/slider/2.png
public/images (empty) so far
答案 0 :(得分:5)
绝对不建议修改node_modules/react-scripts/config/webpack.config.dev.js
文件,因为在更新此特定程序包时该文件将中断。同样,您很可能会在版本控制系统中忽略node_modules
,这意味着该配置不会在开发人员之间共享或备份。
尽管我还没有亲自尝试,但是您可以使用类似https://github.com/timarney/react-app-rewired的方法来覆盖Webpack配置。
您可以在此处查看该教程:https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39
答案 1 :(得分:5)
假设您只是想在构建时将文件从-/src/<somewhere>
移到./<somewhereElse>
。
您可以在package.json中的build
脚本中添加一个额外的步骤。以下步骤完全由您控制,不会与任何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'",
这样,您就不会污染您可能希望保留在源代码管理中的公用文件夹。
答案 2 :(得分:3)
我的工作是这样的:
const { override, addWebpackPlugin } = require('customize-cra');
module.exports = {
webpack: override(
addWebpackPlugin(
new CopyWebpackPlugin({
patterns: [
{ from: 'src/config', to: 'config' }
],
})
)
)
这样,我将获取config文件夹的内容,并在也称为config的版本中创建一个相等的文件。
答案 3 :(得分:1)
我认为问题是因为您将webpack-dev-server
与copy-webpack-plugin
一起使用。如果是这样,copy-webpack-plugin
会将文件复制到webpack-dev-server
可以工作的虚拟目录中。因此,在这种情况下,您需要再添加一个插件才能实现
如果要webpack-dev-server将文件写入输出目录 在开发过程中,您可以使用 写文件webpack插件。
import WriteFilePlugin from 'write-file-webpack-plugin';
webpack配置:
config.plugins.push(
new CopyWebpackPlugin(
[
{
from: 'src/images',
to: 'public/images'
}
])
);
config.plugins.push(new WriteFilePlugin());
您可以访问官方文档以获取更多信息:https://webpack.js.org/plugins/copy-webpack-plugin/
希望这行得通!