如何在不使用 create-react-app 且仅使用我自己的 Webpack 的情况下设置 package.json 进行部署?

Posted

技术标签:

【中文标题】如何在不使用 create-react-app 且仅使用我自己的 Webpack 的情况下设置 package.json 进行部署?【英文标题】:How to set the package.json for deployment without using create-react-app and only using my own Webpack? 【发布时间】:2021-04-03 08:49:38 【问题描述】:

我正在进行一项应用评估,如果不是针对我找不到解决方案的问题,我已经完成了该评估。 一些要求是不使用 CRA(create-react-app)并配置我自己的 Webpack,我这样做了,然后将最终的 react 应用程序推送到 Github Pages,这是我遇到错误的地方。

在我安装 gh-pages 并运行 npm run deploy 之后,我显然得到了错误:npm ERR!缺少脚本:构建,因为我没有它。 由于我只是用来运行 CRA 并让它工作,所以我从来没有想过 react-scripts 中的每个脚本是做什么的。

所以我对现在应该如何处理构建脚本感到困惑。 任何帮助都会很棒。

这是 package.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 【参考方案1】:

将此添加到package.json 文件中的scripts 对象

"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"
  ,

【讨论】:

以上是关于如何在不使用 create-react-app 且仅使用我自己的 Webpack 的情况下设置 package.json 进行部署?的主要内容,如果未能解决你的问题,请参考以下文章

如何在不缩小的情况下构建 React 的生产版本?

不想eject,还咋修改create-react-app的配置?

是否可以将装饰器与 create-react-app 一起使用?

使用 create-react-app 和 webpack 发出 CORS API 请求 - 不明确

SQLAlchemy:如何在不使其成为主键的情况下使整数列 auto_increment (且唯一)?

create-react-app:如何使用 https 而不是 http?