无需Create-react-app从零搭建React项目遇阻，求排查方案

Hey there! As someone who’s stumbled through setting up React without CRA more times than I can count, I totally get your frustration. Let’s break down the key issues in your configs that are keeping your project from running:

1. Critical Typo in .babelrc #

Your .babelrc has a silly typo that’s breaking Babel’s ability to compile React and modern JS:

"presents":["env","react"]
That should be "presets" (with an extra "e"). I also added "stage-0" since you have it installed in devDependencies—it lets you use experimental JS features you might want later. Here’s the corrected version:

{
  "presets": ["env", "react", "stage-0"]
}

2. Webpack Config Fixes #

Your webpack.config.js has two major issues that are blocking the build:

a. Broken HtmlWebpackPlugin Usage #

You’re passing an array to HtmlWebpackPlugin, but it expects an options object. This plugin generates your HTML file and injects the bundled JS—here’s how to fix it:

// Replace this broken line:
new HtmlWebpackPlugin(['app'])

// With this (it’ll generate a basic HTML file if you don’t have a template):
new HtmlWebpackPlugin({
  filename: 'index.html',
  inject: 'body'
})

If you want a custom HTML template, add a template: './public/index.html' line to the options object (just make sure that file exists with a <div id="root"></div> where React can mount).

b. Invalid Test Regex for JS/JSX Files #

Your test regex is incorrectly concatenated, so Webpack won’t process your JSX files properly. Replace this:

test:/\.js/ + /\.jsx?$/

With a single valid regex that matches both .js and .jsx files:

test: /\.jsx?$/

c. Full Corrected webpack.config.js #

I also updated a deprecated syntax (loaders → rules) and added a basic dev server config to make your local setup smoother:

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

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: {
    app: './src/index'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: 'body'
    })
  ],
  module: {
    rules: [{
      test: /\.jsx?$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src')
    }]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    historyApiFallback: true
  }
};

3. Double-Check Your Entry File #

Make sure your src/index.js (or .jsx) has the basic React render code, like:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, Scratch React!</h1>,
  document.getElementById('root')
);

Final Steps to Run #

1. Wipe old dependencies and reinstall to avoid cached issues:

rm -rf node_modules && npm install

2. Run the dev server (make sure your package.json has a start script like "start": "webpack-dev-server --open"):

npm run start

That should get your project up and running! If you hit any other weird errors, just shout.

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