如何在不使用 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 进行部署?的主要内容,如果未能解决你的问题,请参考以下文章
不想eject,还咋修改create-react-app的配置?
是否可以将装饰器与 create-react-app 一起使用?
使用 create-react-app 和 webpack 发出 CORS API 请求 - 不明确