[英]How can I add the CopyWebpackPlugin to create-react-app without ejecting?
I am building a react application and I want to copy all image files from the source destination to the build destination .我正在构建一个 React 应用程序,我想将所有图像文件从源目标复制到构建目标。 I am following some tutorials and so far managed to use
react-app-wired
and the CopyWebpackPlugin
我正在学习一些教程,到目前为止设法使用
react-app-wired
和CopyWebpackPlugin
I am getting no errors and no files are being copied.我没有收到任何错误,也没有复制任何文件。
This is my config-overrides.js
这是我的
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
这是我的
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.假设您只想在构建时将文件从
-/src/<somewhere>
到./<somewhereElse>
。
You could just add an extra step to your build
script in package.json.您可以在 package.json 中为您的
build
脚本添加一个额外的步骤。 The step below is completely in your control and does not mess with any create-react-app scripts or configuration.下面的步骤完全由您控制,不会与任何 create-react-app 脚本或配置混淆。
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.例如,我使用了
ncp
包,但如果您想要更精细的控制,您也可以使用 ncp 甚至原始节点 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测试数据创建 src/images/ 文件夹结构并放入文件
ls -R src/images/
src/images/:
badge.jpg folder1
src/images/folder1:
applause.gif blank.png
Package.json包.json
I only edited the part: "build": "ncp './src/images' './public/images' && react-scripts build",
我只编辑了部分:
"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
运行构建后:
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.建议我假设您最终需要
build
目录中的这些文件。 If so, you can just switch your build
script.如果是这样,您可以切换
build
脚本。
"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.这样您就不会污染您的公用文件夹,您可能希望将其保留在源代码管理中。
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.绝对不建议修改
node_modules/react-scripts/config/webpack.config.dev.js
文件,因为这会在更新此特定包时中断。 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.也很可能你会在你的版本控制系统中忽略
node_modules
,这意味着这个配置不会在开发人员之间共享或备份。
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.虽然我没有亲自尝试过,你可以使用这样的东西: https : //github.com/timarney/react-app-rewired来覆盖 Webpack 配置。
You can have a look at the tutorial here : https://medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39您可以在此处查看教程: https : //medium.com/@timarney/but-i-dont-wanna-eject-3e3da5826e39
Mine worked like this:我的工作是这样的:
const { override, addWebpackPlugin } = require('customize-cra');
module.exports = {
webpack: override(
addWebpackPlugin(
new CopyWebpackPlugin({
patterns: [
{ from: 'src/config', to: 'config' }
],
})
)
)
With that, I'm taking the contents of my config folder and creating an equal one in the build also called config.有了这个,我将获取我的 config 文件夹的内容并在构建中创建一个相同的文件夹,也称为 config。
I think the problem is because you are using webpack-dev-server
together with copy-webpack-plugin
.我认为问题是因为您将
webpack-dev-server
与copy-webpack-plugin
一起使用。 If that's true, the copy-webpack-plugin
will copy files to virtual directory which webpack-dev-server
works.如果是这样,
copy-webpack-plugin
会将文件复制到webpack-dev-server
工作的虚拟目录。 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.
如果你想让 webpack-dev-server 在开发过程中将文件写入输出目录,你可以使用 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/更多信息可以访问官方文档: https : //webpack.js.org/plugins/copy-webpack-plugin/
Hope this works!希望这有效!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.