我正在 Windows 作業系統中創建一個基本的 React 應用程式，一切都很好，但是當我這樣做時npm start，應用程式沒有加載localhost:3000。我看到了錯誤Cannot GET /。
這是我專案的完整結構-
- webpack.config.js
- package.json
- index.html
- .babelrc
- src / index.html
- src / app.jsx
webpack.config.js檔案 -
const webpack = require("webpack");
const path = require("path");
module.exports = {
entry: path.resolve(__dirname, "./src/index.js"),
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
},
plugins: [new webpack.HotModuleReplacementPlugin()],
devServer: {
contentBase: path.resolve(__dirname, "./dist"),
hot: true,
},
};
包.json檔案
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --config ./webpack.config.js --mode development --port 3000"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/preset-env": "^7.13.9",
"react-hot-loader": "^4.13.0",
"webpack": "^5.24.3",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2",
"@babel/core": "^7.13.8",
"@babel/preset-react": "^7.12.13",
"babel-loader": "^8.2.2"
}
}
index.html檔案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="root"></div>
<script src="./node_modules/react/umd/react.development.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="./dist/main.js"></script>
</body>
</html>
.babelrc檔案
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
src/index.js檔案
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("app"));
// hot reloading. It works by replacing a module of the application
// during runtime with an updated one so that it’s available for instant use.
module.hot.accept();
src/app.jsx檔案
import React from 'react'
const App = () => {
return (
<h1>
React application
</h1>
)
}
export default App;
注意：當我npm start在命令提示符下運行時，我沒有看到dist/被創建。
uj5u.com熱心網友回復：
我認為您使用舊版本的create-react-app. 嘗試升級到最新版本并使用升級創建專案create-react-app。
uj5u.com熱心網友回復：
以下是您需要做的更改
webpack.config.js
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
],
},
resolve: {
modules: [path.join(__dirname, "./src"), "node_modules"],
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].bundle.js",
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "index.html"),
}),
],
devServer: {
contentBase: path.resolve(__dirname, "./dist"),
hot: true,
open: true,
},
};在檔案 src/index.js 中替換
document.getElementById("app")
和
document.getElementById("root")
進行這些更改后，安裝html-webpack-plugin并使用以下命令啟動您的應用程式npm start
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406593.html
標籤：