Как установить package.json для развертывания без использования приложения create-react-app и только с помощью моего собственного Webpack?

Я делаю оценку приложения, которую я закончил, если бы не проблема, для которой я не могу найти решение. Некоторые из требований заключаются в том, чтобы не использовать CRA (create-react-app) и настроить свой собственный Webpack, что я и сделал, а затем отправить окончательное реагирующее приложение на Github Pages, где я получаю ошибки.

После того, как я установил gh-pages и запустил npm run deploy, я, очевидно, получаю сообщение об ошибке: npm ERR! отсутствует script: build, потому что у меня его нет. Поскольку меня использовали только для запуска CRA и чтобы он работал, я ошибочно никогда не задавался вопросом, что делает каждый скрипт из реактивных скриптов.

Поэтому я не понимаю, что мне теперь делать со сценарием сборки. Любая помощь будет здорово.

Вот пакет.json:

{
  "name": "assessment",
  "homepage": "https://myUsername.github.io/Github_followers_front-end/",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "keywords": [],
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "antd": "^4.9.4",
    "axios": "^0.21.0",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "gh-pages": "^3.1.0",
    "lodash": "^4.17.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-hot-loader": "^4.13.0",
    "style-loader": "^2.0.0",
    "svg-url-loader": "^7.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "dotenv": "^8.2.0"
  }
}

Вот файл webpack.config.js:

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      // React loader
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      // css loader
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      // Images loader
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      // SVG loader
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-url-loader',
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 3000,
    hot: true
  },
};

И .babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Конечно, в этом случае вам нужно создать скрипт сборки самостоятельно, что, скорее всего, build: webpack

tmhao2005 25.12.2020 08:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
1
1 907
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Добавьте это к объекту scripts в вашем файле package.json

"build": "webpack --mode production"

Итак, ваш scripts выглядит так

"scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "webpack --mode production"
  },

Другие вопросы по теме