面对运行带有 Babel 的 Webpack 的问题

Question

Every time I run npm run dev it gets the error :

$ npm 运行开发

谁能帮我在 React 中用 webpack 设置 babel？也许我在这里面临版本问题。它与以前版本的 webpack、webpack dev server 和 webpack cli 一起工作。但是当我升级到最新版本时，它会向我显示这些错误。谁能帮我看看这个设置有什么问题吗？

这是显示的错误：

> indecision-app-clone@1.0.0 dev D:\React Project\Andrew Mead\indecision-app-clone
> webpack --mode development

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! indecision-app-clone@1.0.0 dev: `webpack --mode development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the indecision-app-clone@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Samiul Karim Prodhan\AppData\Roaming\npm-cache\_logs21-07-27T08_08_08_699Z-debug.log

package.json

{
  "dependencies": {
    "@babel/cli": "^7.14.8",
    "@babel/core": "^7.14.8",
    "@babel/node": "^7.14.7",
    "@babel/preset-env": "^7.14.8",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "live-server": "^1.2.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-modal": "^3.14.3"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "build": "npx webpack --mode development"
  },
  "name": "indecision-app-clone",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "devDependencies": {
    "@babel/preset-react": "^7.14.5",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "webpack-cli": "^4.7.2"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

webpack.config.js

 // entry -> output
const path = require("path");
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules:  [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/,
      },
    ],
  },
  devtool: "cheap-module-eval-source-map",
  devServer: { 
    inline: false,
    contentBase: path.join(__dirname, "public"),
  },
};

Answer 1

'resolve' 在 webpack.config.js 中拼写错误。路径：path.reseolve(__dirname, "public"),

Answer 2

在 webpack.config.json 中，尝试将值 devtool 值更改为“eval-cheap-module-source-map”

面对运行带有 Babel 的 Webpack 的问题

Facing problem with running Webpack with Babel in react

ecmascript-6

reactjs

webpack

babeljs

面对 运行 带有 Babel 的 Webpack 的问题

Facing problem with running Webpack with Babel in react

ecmascript-6

reactjs

webpack

babeljs

面对运行带有 Babel 的 Webpack 的问题