使用Webpack运行React应用时构建报错求助

Hey, let's get your React app running with Webpack again. That syntax error is almost certainly tied to the copy command in your build script—here's why and how to fix it:

The Root Cause #

The copy command is exclusive to Windows' CMD shell. If you're running your build on Mac/Linux, or using a Unix-like shell (like Git Bash, WSL, or PowerShell's strict mode) on Windows, this command won't be recognized, triggering the syntax error you see.

Solution 1: System-Specific Command Adjustment #

Pick the fix that matches your operating system:

• Windows (CMD): If you're already using plain CMD, double-check that your src/index.html exists and the dist folder is created. If you're using PowerShell, replace copy with Copy-Item instead.
• Mac/Linux or Unix-like Shell: Swap copy for the Unix equivalent cp in your package.json script:

  "scripts": {
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot"
  }
  

Solution 2: Cross-Platform npm Package (Recommended) #

To avoid system-specific issues entirely, use a cross-platform file-copying tool like copyfiles:

1. Install the package as a dev dependency:

   npm install copyfiles --save-dev
   

2. Update your build script to use copyfiles instead of copy:

   "scripts": {
     "build": "webpack -d && copyfiles src/index.html dist && webpack-dev-server --content-base src/ --inline --hot"
   }
   

Bonus: Better Long-Term Fix with HtmlWebpackPlugin #

Instead of manually copying your HTML file, let Webpack handle it automatically with the html-webpack-plugin—this is the standard approach for React + Webpack setups:

1. Install the plugin:

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

2. Add it to your webpack.config.js:

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // Your existing Webpack config (entry, module rules, etc.)
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html', // Path to your source HTML
         filename: './index.html' // Output file in dist folder
       })
     ]
   };
   

3. Simplify your build script by removing the copy command entirely:

   "scripts": {
     "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot"
   }
   

Now Webpack will automatically inject your bundled JS into the HTML file and output it to the dist folder every time you build.

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