使用 mode=product 构建 webpack 时出现意外标记：运算符 (<)

Question

我在使用 Node 17.7.1 构建 Node.js React 组件时遇到错误。我怀疑这是由于 babel 没有在生产模式下转译源文件，因为 '<'缩小器在生产模式下遇到字符。然而，这适用于 mode=development。

我对 node.js 和 webpack 非常陌生，很可能我在这里遗漏了一些东西。请指教。

谢谢

npm run build -- --mode production --env customoutdir=.\testit"

> [email protected] build
> webpack --config webpack.prod.config.js "--mode" "production" "--env" "customoutdir=.\\testit"

customoutdir: .\\testit
assets by status 202 KiB [cached] 11 assets
orphan modules 244 KiB [orphan] 24 modules
runtime modules 939 bytes 4 modules
cacheable modules 385 KiB
  modules by path ./node_modules/ 141 KiB
    modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
    modules by path ./node_modules/react/ 6.48 KiB 2 modules
    modules by path ./node_modules/react-dom/ 119 KiB 2 modules
    modules by path ./node_modules/scheduler/ 4.91 KiB 2 modules
    modules by path ./node_modules/css-loader/dist/runtime/*.js 2.33 KiB 2 modules
    ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
  modules by path ./src/ 245 KiB
    ./src/index.js + 23 modules 244 KiB [built] [code generated]
    ./node_modules/css-loader/dist/cjs.js!./src/App.css 638 bytes [built] [code generated]

ERROR in src/index.js
src/index.js from Terser plugin
Unexpected token: operator (<) [src/index.js:7,2]
    at js_error (c:\myproject\node_modules\terser\dist\bundle.min.js:550:11)
    at croak (c:\myproject\node_modules\terser\dist\bundle.min.js:1274:9)
    at token_error (c:\myproject\node_modules\terser\dist\bundle.min.js:1282:9)
    at unexpected (c:\myproject\node_modules\terser\dist\bundle.min.js:1288:9)
    at expr_atom (c:\myproject\node_modules\terser\dist\bundle.min.js:2525:9)
    at maybe_unary (c:\myproject\node_modules\terser\dist\bundle.min.js:3310:19)
    at expr_ops (c:\myproject\node_modules\terser\dist\bundle.min.js:3361:24)
    at maybe_conditional (c:\myproject\node_modules\terser\dist\bundle.min.js:3366:20)
    at maybe_assign (c:\myproject\node_modules\terser\dist\bundle.min.js:3443:20)
    at expression (c:\myproject\node_modules\terser\dist\bundle.min.js:3468:24)

ERROR in src/App.js
src/App.js from Terser plugin
Unexpected token: operator (<) [src/App.js:69,11]
    at js_error (c:\myproject\node_modules\terser\dist\bundle.min.js:550:11)
    at croak (c:\myproject\node_modules\terser\dist\bundle.min.js:1274:9)
    at token_error (c:\myproject\node_modules\terser\dist\bundle.min.js:1282:9)
    at unexpected (c:\myproject\node_modules\terser\dist\bundle.min.js:1288:9)
    at expr_atom (c:\myproject\node_modules\terser\dist\bundle.min.js:2525:9)
    at maybe_unary (c:\myproject\node_modules\terser\dist\bundle.min.js:3310:19)
    at expr_ops (c:\myproject\node_modules\terser\dist\bundle.min.js:3361:24)
    at maybe_conditional (c:\myproject\node_modules\terser\dist\bundle.min.js:3366:20)
    at maybe_assign (c:\myproject\node_modules\terser\dist\bundle.min.js:3443:20)
    at expression (c:\myproject\node_modules\terser\dist\bundle.min.js:3468:24)

webpack 5.70.0 compiled with 2 errors in 4429 ms

我的 package.json 看起来像这样：

{
  "name": "myproject",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-decorators": "^7.17.2",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "babel-plugin-inline-json-import": "^0.3.2",
    "copy-webpack-plugin": "^10.2.4",
    "mobx": "^6.4.2",
    "mobx-react": "^7.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-icons": "^4.3.1",
    "react-router-dom": "^6.2.2",
    "react-scripts": "5.0.0",
    "webpack": "5.70.0",
    "webpack-cli": "^4.9.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.5",
    "babel-loader": "^8.2.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "webpack --config webpack.prod.config.js",
    "build-watch": "webpack --config webpack.prod.config.js --watch"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我的 webpack.prod.config.js 看起来像这样：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env) => {
  console.log('customoutdir:', env.customoutdir);

  return {
    entry: './src/index.js',
    mode: "development",
    output: {
      path: path.resolve(__dirname, env.customoutdir),
      filename: 'index.js',
    },
    module: {
      rules: [
        {
          test: /\.m?js$/,
          include: path.resolve(__dirname, 'src'),
          exclude: /node_modules|.html/,
        use: {
                loader: 'babel-loader',
                options: {
                  presets: [
                    ['@babel/preset-react']
                  ]
                }
              }
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
        {
          test: /\.(gif|svg|jpg|png)$/,
          loader: "file-loader",
        }
      ]
    },
    resolve: {
      extensions: [".js", ".jsx"]
     },
    plugins: [
      new CopyPlugin({patterns: [
        { from: 'public/index.html', to: 'index.html' },
        { from: '.debug', to: '.debug', toType: 'file' },
        { from: 'src', to: 'src' },
      ]}),
    ],
  }
};

我的 Index.js 看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import App from './App';

ReactDOM.render(
  **// this is the offending line in the error log**
  <Provider>
    <App />
  </Provider>
  , document.getElementById('root')
);

我的 App.js 看起来像这样：

import React from "react";
import './App.css';

class App extends React.Component {

  componentDidMount() {
    // blah
  }

  // blah
  
  render() {
    **// this is the offending line in the error log**
    return <div className="centerDiv">
      <p>My project landing page...</p>
      <progress />
    </div>
  }

}
export default App;