Как я могу добавить CopyWebpackPlugin в приложение create-response-app без извлечения?

Определенно не рекомендуется изменять файл 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

Предположим, вы просто хотите переместить файлы с -/src/<somewhere> на ./<somewhereElse> во время строить.

Вы можете просто добавить дополнительный шаг к своему сценарию build в package.json. Приведенный ниже шаг полностью под вашим контролем и не влияет на какие-либо сценарии или конфигурацию create-response-app.

Например, я использовал ncpупаковка, но если вам нужен более детальный контроль, вы также можете создать свой собственный «шаг» с помощью ncp или даже с помощью raw node 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'",

Таким образом вы не загрязните свою общую папку, которую, возможно, захотите оставить в системе управления версиями.

Я думаю, проблема в том, что вы используете webpack-dev-server вместе с copy-webpack-plugin. Если это правда, copy-webpack-plugin скопирует файлы в виртуальный каталог, который работает с webpack-dev-server. Итак, в этой ситуации вам нужно добавить еще один плагин, чтобы это произошло.

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.

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/

Надеюсь, это сработает!

Моя работала так:

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

При этом я беру содержимое своей папки config и создаю такое же в сборке, также называемое config.