Javascript 在带有Webpack和Babel的网站上部署应用程序时出错（显示空白页）
我正在尝试将我的应用程序部署到我的网站，但它在控制台中部署时没有出现错误，但html页面是空白的。以下是我的一些文件 package.json：Javascript 在带有Webpack和Babel的网站上部署应用程序时出错（显示空白页）,javascript,reactjs,webpack,babeljs,Javascript,Reactjs,Webpack,Babeljs,我正在尝试将我的应用程序部署到我的网站，但它在控制台中部署时没有出现错误，但html页面是空白的。以下是我的一些文件 package.json： { "name": "name-here", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.9.13", "@testing-library/jest-
{
"name": "name-here",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.9.13",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"bootstrap": "^4.4.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.1",
"react-day-picker": "^7.4.8",
"react-device-detect": "^1.12.1",
"react-dom": "^16.13.1",
"react-hook-form": "^5.6.2",
"react-icons": "^3.10.0",
"react-native-vector-icons": "^6.6.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-time-picker": "^4.0.1",
"react-web-vector-icons": "^1.0.2",
"requirejs": "^2.3.6"
},
"devDependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"@babel/preset-react": "^7.9.4",
"babel-loader": "^8.1.0",
"babel-preset-expo": "~8.1.0",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"react-scripts": "^3.4.1",
"ttf-loader": "^1.0.2",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: path.join(__dirname, "src/index.js"),
output: {
path: __dirname + "/dist",
publicPath: "/",
filename: "bundle.js",
},
devServer: {
contentBase: "./dist",
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules/,
loader: "url-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.(woff|woff2|eot|ttf)$/,
exclude: /node_modules/,
loader: "url-loader?limit=100000",
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: path.join(__dirname, "public/index.html"),
filename: "./index.html",
}),
],
};
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Name here</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
名字在这里
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '../src/App';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“../src/App”导入应用程序；
导入'bootstrap/dist/css/bootstrap.min.css'；
ReactDOM.render(
,
document.getElementById（'root'））
);
有人能帮我找到解决办法吗？我已经生成了一个build文件夹和dist文件夹。它构建成功 您的
index.htmljs我建议您使用React启动一个新的React项目。它为您提供了一个
npm run buildbuild