安装React后执行npm start遇Webpack报错，修改配置仍有mode提示

Hey there! Let's work through these Webpack issues one by one—they're super common when using newer Webpack versions, so don't worry, we'll get your app running in no time.

1. Why loaders → rules was necessary #

Starting with Webpack 4, the configuration property for module loaders changed from loaders to rules. That's why your initial setup threw an error—Webpack no longer recognizes the old loaders key. You were right to switch to rules, but that uncovered the next required setting: the mode option.

2. Adding the mode option #

Webpack 4+ forces you to set a mode value to enable built-in environment-specific optimizations. Here's what each mode does:

• development: Keeps code unminified, enables debug tools, and adds helpful warnings—ideal for building and testing your app locally.
• production: Minifies code, removes dead code, and enables performance optimizations—use this when you're ready to deploy.

3. Fixing other hidden issues in your config #

There are a couple more small tweaks needed to get your config fully functional:

• Windows path escaping: The path value in output uses backslashes (\), which need to be escaped as double backslashes (\\) in JavaScript strings, or you can use forward slashes (/) instead to avoid parsing errors.
• Babel loader updates: Newer Babel versions use babel-loader instead of just babel for the loader name. Also, the query property is deprecated—use options instead, and make sure you're using the latest preset packages.

Here's your fully corrected Webpack config: #

var config = {
  entry: './main.js',
  output: {
    // Use escaped backslashes or forward slashes for Windows paths
    path: 'C:\\Users\\34337\\reactApp', 
    // Alternative: path: '/C:/Users/34337/reactApp'
    filename: 'index.js',
  },
  // Add the required mode option
  mode: 'development', 
  devServer: {
    inline: true,
    port: 7777
  },
  module: {
    rules: [{ // Updated from loaders to rules
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader', // Updated to modern loader name
      options: { // Replaced deprecated query with options
        presets: ['@babel/preset-env', '@babel/preset-react']
      }
    }]
  }
};
module.exports = config;

4. Install missing Babel dependencies #

If you haven't already, install the latest Babel packages to make the loader work:

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/preset-react

Once you've updated your config and installed these dependencies, run npm start again—your React app should fire up without those Webpack errors!

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