[英]How to set the package.json for deployment without using create-react-app and only using my own Webpack?
I am doing an app assessment which I finished if not for a problem for which I cannot find a solution.我正在做一个应用程序评估,如果不是针对我找不到解决方案的问题,我会完成该评估。 Some of the requirements are to not use CRA (create-react-app) and to configure my own Webpack, which I did, then to push the final react app to Github Pages, which is where I am getting errors.
一些要求是不使用 CRA (create-react-app) 并配置我自己的 Webpack,我这样做了,然后将最终的 react 应用程序推送到 Github Pages,这是我遇到错误的地方。
After I installed gh-pages and ran npm run deploy I am, obviously, getting the error: npm ERR: missing script, build.在我安装了 gh-pages 并运行 npm 运行部署之后,我显然得到了错误:npm ERR:缺少脚本,构建。 because I don't have it, Since I was used just to run CRA and have it worked.
因为我没有它,因为我只是用来运行 CRA 并让它工作。 I wrongly never wondered what each script from react-scripts does.
我错误地从未想过 react-scripts 中的每个脚本是做什么的。
So I am confused about what I should do now with the build script.所以我对现在应该用构建脚本做什么感到困惑。 Any help would be great.
任何帮助都会很棒。
Here is the package.json:这是 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"
}
}
Here is the webpack.config.js:这是 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
},
};
And the.babelrc和.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Add this to the scripts
object in your package.json
file将此添加到
package.json
文件中的scripts
object
"build": "webpack --mode production"
So your scripts
looks like this所以你的
scripts
看起来像这样
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development",
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"build": "webpack --mode production"
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.