React+Webpack新手求助：Maven Install时CSS语法错误与webpack依赖警告

Hey there! Let's work through your problems one by one—since you're new to this tech stack, I'll keep things clear and actionable.

1. First: Fix the Webpack/Webpack-CLI Peer Dependency Warning & Babel-Loader Conflict #

That warning npm WARN webpack-cli@2.0.14 requires a peer of webpack@^4.0.0 but none was installed means your package versions are out of sync. When you upgraded Webpack to 4.x, the babel-loader issue popped up because Webpack 4 requires babel-loader 8.x+, which relies on Babel 7.x (not the older Babel 6.x packages you likely had before).

Here's how to fix this cleanly:

• First, uninstall outdated babel-related packages to start fresh:

  npm uninstall babel-loader babel-core babel-preset-react babel-preset-env
  

• Then install the compatible Babel 7 + Webpack 4 tooling:

  npm install --save-dev babel-loader @babel/core @babel/preset-react @babel/preset-env webpack@4 webpack-cli@3
  

  (Note: webpack-cli@3 is fully compatible with Webpack 4, which eliminates the peer dependency warning entirely)

2. Fixing the CSS "Unexpected Token" Error #

This error almost always happens because Webpack is trying to parse your CSS files as JavaScript (it doesn't know how to handle CSS by default). You need to add dedicated loaders to process CSS correctly:

Step 1: Install required CSS loaders #

Run this command to add the necessary packages:

npm install --save-dev css-loader style-loader

• css-loader: Parses CSS imports and resolves dependencies like @import or url()
• style-loader: Injects processed CSS into the DOM via <style> tags (great for development; use mini-css-extract-plugin for production builds if you want separate CSS files)

Step 2: Update your Webpack config #

Add this rule to your webpack.config.js under the module.rules section:

module.exports = {
  // ... your existing config (entry, output, dev server settings, etc.)
  module: {
    rules: [
      // ... your existing babel-loader rule for JS/JSX files
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'], // Order matters! Webpack runs loaders from right to left
      },
    ],
  },
};

3. Maven Configuration Check (Frontend-Maven-Plugin) #

Since you're using Maven to handle frontend builds, you're almost certainly using the frontend-maven-plugin to run npm commands. Make sure your pom.xml is set up to:

• Install a compatible Node.js/npm version
• Run npm install before building
• Execute Webpack during the Maven build lifecycle

Here's a reliable sample plugin configuration:

<plugin>
  <groupId>com.github.eirslett</groupId>
  <artifactId>frontend-maven-plugin</artifactId>
  <version>1.12.0</version>
  <executions>
    <!-- Install Node.js and npm -->
    <execution>
      <id>install node and npm</id>
      <goals>
        <goal>install-node-and-npm</goal>
      </goals>
      <configuration>
        <nodeVersion>v16.18.0</nodeVersion> <!-- Use an LTS version compatible with Webpack 4 -->
        <npmVersion>8.19.2</npmVersion>
      </configuration>
    </execution>
    <!-- Run npm install to fetch dependencies -->
    <execution>
      <id>npm install</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>install</arguments>
      </configuration>
    </execution>
    <!-- Run Webpack production build -->
    <execution>
      <id>webpack build</id>
      <goals>
        <goal>npm</goal>
      </goals>
      <configuration>
        <arguments>run build</arguments> <!-- Match this to the "build" script in your package.json -->
      </configuration>
      <phase>prepare-package</phase>
    </execution>
  </executions>
</plugin>

Also, double-check your package.json has a valid build script:

{
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development"
  }
}

Quick Troubleshooting Checklist #

• Delete your node_modules folder and package-lock.json, then re-run npm install to clean up any corrupted dependencies
• Verify that all your Webpack loaders are targeting the correct file extensions (.css for CSS, .jsx? for React files)
• Double-check that your CSS files don't have accidental typos in the first line (though the error is almost certainly loader-related)

If you still hit snags, sharing snippets of your actual package.json and webpack.config.js would help us dig deeper!

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