如何在不彈出的情況下將 CopyWebpackPlugin 添加到 create-react-app？

Question

我正在構建一個 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

Answer 1

假設您只想在構建時將文件從-/src/<somewhere>到./<somewhereElse> 。

您可以在 package.json 中為您的build腳本添加一個額外的步驟。 下面的步驟完全由您控制，不會與任何 create-react-app 腳本或配置混淆。

例如，我使用了ncp包，但如果您想要更精細的控制，您也可以使用 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

包.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'",

這樣您就不會污染您的公用文件夾，您可能希望將其保留在源代碼管理中。

Answer 2

絕對不建議修改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

Answer 3

我的工作是這樣的：

const { override, addWebpackPlugin } = require('customize-cra');
module.exports = {
webpack: override(
    addWebpackPlugin(
        new CopyWebpackPlugin({
            patterns: [
                { from: 'src/config', to: 'config' }
            ],
        })
    )
)

有了這個，我將獲取我的 config 文件夾的內容並在構建中創建一個相同的文件夾，也稱為 config。

Answer 4

我認為問題是因為您將webpack-dev-server與copy-webpack-plugin一起使用。 如果是這樣， copy-webpack-plugin會將文件復制到webpack-dev-server工作的虛擬目錄。 所以，在這種情況下，你需要再添加一個插件來實現它

如果你想讓 webpack-dev-server 在開發過程中將文件寫入輸出目錄，你可以使用 write-file-webpack-plugin 強制它。

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/

希望這有效！