使用 React、TypeScript 和 Webpack 的空白页面

Question

我使用 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" alt="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;

Answer 1

我知道有很多类似的问题，但是 none 经过数小时的搜索解决了我的问题。最后，我遇到了 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 的空白页面

Blank page with React, TypeScript, and Webpack

typescript

reactjs

webpack

babeljs