Webpack打包运行无报错但页面无渲染：React TS+Next项目求助

核心问题 #

你的项目同时混用了Next.js的约定式路由和手动配置的Webpack，这是页面无内容的主要根源，具体问题点如下：

• Next.js的/pages路由约定不被手动Webpack识别：你把主组件放在/pages/index.tsx，但手动Webpack只会将其作为普通入口文件，不会像Next那样自动处理页面渲染、路由逻辑。
• 入口文件缺少DOM挂载代码：Next.js会自动完成React组件到DOM的挂载，但手动Webpack环境下，需要你自己编写挂载逻辑。
• Babel配置冲突：.babelrc中同时配置了next/babel和普通React/Babel预设，导致编译逻辑混乱。
• 缺少HTML模板文件：Webpack打包生成bundle.js后，需要有HTML文件引入该脚本，否则浏览器没有可渲染的页面入口。

解决方案 #

方案一：使用Next.js自带构建流程（推荐） #

Next.js本身已封装Webpack配置，无需手动配置，直接用官方命令即可：

1. 修改package.json的scripts，保留Next原生命令，移除手动Webpack相关命令：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

2. 删除手动配置的webpack.config.js和.babelrc（Next会自动处理Babel与Webpack配置）
3. 确保/pages/index.tsx符合Next页面组件要求：默认导出React组件即可，无需手动挂载

// pages/index.tsx
export default function Home() {
  return <div>Hello Next.js!</div>;
}

4. 运行npm run dev启动项目，页面即可正常渲染

方案二：继续使用手动Webpack（放弃Next.js特性） #

若坚持手动配置Webpack，需调整以下内容：

1. 添加ReactDOM挂载代码：修改/pages/index.tsx，补充挂载逻辑（此时/pages只是普通目录，Next路由规则失效）

// pages/index.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <div>Hello React!</div>;
}

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = createRoot(rootElement);
  root.render(<App />);
}

2. 修复Babel配置：移除.babelrc中的next/babel预设，添加TypeScript预设：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript"
  ]
}

同时安装对应依赖：

npm install --save-dev @babel/preset-typescript

3. 添加HTML模板支持：安装html-webpack-plugin生成引入bundle的HTML文件：

npm install --save-dev html-webpack-plugin

修改webpack.config.js，添加插件配置：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './pages/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.(pdf|jpg|png|gif|svg|ico)$/,
        use: [
          {
            loader: 'url-loader'
          },
        ]
      },
      {  
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: "file-loader"
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.ts', '.tsx']
  },
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};

4. 创建HTML模板文件：在项目根目录新建public/index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

5. 运行npm run start，页面即可正常渲染

内容的提问来源于stack exchange，提问作者Nat