reactjs – 如何在不弹出的情况下将CopyWebpackPlugin添加到crea

发布时间：2020-12-15 20:16:51 所属栏目：百科来源：网络整理

导读：我正在构建一个react应用程序,我想将所有图像文件从源目标复制到构建目标.我正在学习一些教程,到目前为止设法使用react-app-wired和CopyWebpackPlugin 我没有错误,也没有复制文件. 这是我的config-overrides.js const CopyWebpackPlugin = require('copy-web

我正在构建一个react应用程序,我想将所有图像文件从源目标复制到构建目标.我正在学习一些教程,到目前为止设法使用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 /图片
SRC /图像/ file.jpg
SRC /图像/滑块/ 1.png
SRC /图像/滑块/ 2.png
目前为止公共/图像(空)

解决方法

假设您只想从 – / src /< somewhere>移动文件to ./u0026lt;somewhereElseu0026gt;在建设时.

您可以在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","dependencies": {
    "react": "^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","devDependencies": {
    "ncp": "^2.0.0"
  }
}

测试：
在运行构建之前：

ls public
favicon.ico  index.html  manifest.json

运行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

建议
我假设你最终需要在build目录中使用这些文件.如果是这样,您只需切换构建脚本即可.

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!