代码之家 › 专栏 › 技术社区 › TheBlackBenzKid

如何添加CopyWebpackPlugin以创建react应用程序而不弹出?

webpack npm reactjs

TheBlackBenzKid · 技术社区 · 7 年前

我正在构建一个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/images src/images/file.jpg src/images/slider/1.png src/images/slider/2.png public/images (empty) so far

3 回复 | 直到 7 年前

dubes user2167877 7 年前

假设你只想从 -/src/<somewhere> 到 ./<somewhereElse> 建造时间。

你可以在你的 build package.json中的脚本。下面的步骤完全在您的控制之下,不会影响任何create-react应用程序脚本或配置。

例如,我使用 ncp package

下面是一个复制我所做的事情的方法:

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

试验数据 创建src/images/folder结构并放入文件

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

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

包.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": "react-scripts build && ncp './src/images' './build/images'",

这样你就不会污染你的公共文件夹,你可能想把它保存在你的源代码管理中。

ajaybc 7 年前

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

Dat Tran 7 年前

webpack-dev-server 一起 copy-webpack-plugin . 如果那是真的将文件复制到作品。所以,在这种情况下,你需要再添加一个插件来实现它

如果希望webpack开发服务器将文件写入输出目录在开发过程中,可以使用

import WriteFilePlugin from 'write-file-webpack-plugin';

网页包配置:

config.plugins.push(
    new CopyWebpackPlugin(
    [
      {
        from: 'src/images',
        to: 'public/images'
      }
    ])
  );
config.plugins.push(new WriteFilePlugin());

有关详细信息,请访问官方文档: https://webpack.js.org/plugins/copy-webpack-plugin/

希望能成功!