带有 React、TypeScript 和 Webpack 的空白页面
Posted
技术标签:
【中文标题】带有 React、TypeScript 和 Webpack 的空白页面【英文标题】：Blank page with React, TypeScript, and Webpack 【发布时间】：2022-01-23 06:51:03 【问题描述】：我使用create-react-app 创建了一个 React 应用程序，并向其中添加了 TypeScript。我添加了 Webpack，因为我希望它运行我的本地服务器来服务我的所有资产，并最终构建我的生产资产。当我运行react-scripts start 时，我得到了默认的 React 欢迎页面，没有任何问题。但是当我运行webpack-dev-server 时，我只看到一个没有 html 的空白页面。
可能出了什么问题？我在下面包含了我的配置。提前致谢。
webpack.config.js
const path = require('path');
const mode = process.env.NODE_ENV || 'development';
module.exports =
mode: mode,
module:
rules: [
test: /\.tsx?$/,
exclude: /node_modules/,
use: ['babel-loader', 'ts-loader'],
,
test: /\.s[ac]ss$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader', 'sass-loader']
,
test: /\.(png|jpe?g|svg|gif|ico)$/i,
use: ["file-loader"],
],
,
resolve:
extensions: ['.tsx', '.ts', '.js'],
,
output:
filename: 'bundle.js',
path: path.resolve(__dirname, 'build'),
,
;
babel.config.js
module.exports =
presets: [
'@babel/preset-typescript',
'@babel/preset-env'
],
plugins: [
"@babel/proposal-class-properties",
"@babel/proposal-object-rest-spread"
]
tsconfig.json
"compilerOptions":
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"jsx": "react-jsx",
"sourceMap": true
,
"include": [
"src"
]
App.tsx
import React from 'react';
import Routes, Route from "react-router-dom";
import About from "./About";
import logo from './logo.svg';
import './App.scss';
function App()
return (
<div className="App">
<header className="App-header">
<img src=logo className="App-logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Routes>
<Route path="/about" element=<About /> />
</Routes>
</div>
);
export default App;
【问题讨论】：
【参考方案1】：我知道有很多类似的问题，但经过数小时的搜索，没有一个能解决我的问题。最后，我遇到了this SO post，它为我解决了这个问题。这是我所做的：
-
将
index.html添加到/src/index.html：
<html>
<body>
<div id="root"></div>
</body>
</html>
安装 html-webpack-plugin 以在 HTML 页面上呈现 React：yarn add html-webpack-plugin --dev
更新我的 Webpack 配置以将我的应用加载到我刚刚创建的 HTML 文件中：
module.exports =
...
plugins: [
new HtmlWebpackPlugin(
template: './src/index.html'
)
]
...
然后就成功了！
【讨论】：
以上是关于带有 React、TypeScript 和 Webpack 的空白页面的主要内容，如果未能解决你的问题，请参考以下文章
如何在基于 Typescript 的 React Web 应用程序中具有参数的 Route 元素中传递其他道具
带有 React.createContext 的 Typescript HOC
带有 Typescript 和 react-redux 的有状态组件：“typeof MyClass”类型的参数不可分配给 Component 类型的参数
如何在带有 React 的 Typescript/JSX 中使用带有箭头函数的泛型？