Reactjs Webpack：影响编译输出的选项`output`选项告诉webpack如何将编译后的文件写入磁盘

Package.Json

Webpack.common.js

Webpack.dev.js

错误： $npm开始

我的-app@0.1.0启动E:\reactnewTest\my app webpack服务--打开--配置webpack.dev.js

[webpack cli]配置对象无效。已使用与API架构不匹配的配置对象初始化Web包

• configuration.output具有未知属性“clean”。这些属性是有效的： 对象{auxiliaryComment？、chunkCallbackName？、chunkFilename？、chunkLoadTimeout？、crossOriginLoading？、devtoolFallbackModuleFilenameTemplate？、devtoolLineToLine？、devtoolModuleFilenameTemplate？、devtoolNamespace？、filename？、futureEmitAssets？、globalObject？、hashDigest？、hashDigestLength？、hashFunction？、hashSalt？、hotUpdateChunkFilename？、hotUpdateFunc选项？、HotUpdateMapInfineName？、JSONPFFunction？、JSONPScript类型？、库？、库导出？、库目标？、路径？、路径信息？、公共路径？、源映射文件名？、源前缀？、strictModuleExceptionHandling？、umdNamedDefine？、webassemblyModuleFilename？} ->影响编译输出的选项。

  输出

  选项告诉webpack如何将编译后的文件写入磁盘。 npm错误！代码错误周期 npm错误！错误2 嗯，我的天-app@0.1.0开始：

  webpack服务——打开——配置webpack.dev.js

  npm错误！退出状态2 npm错误！ npm ERR！在我的-app@0.1.0开始脚本。 npm错误！这可能不是npm的问题。上面可能还有其他日志输出

npm ERR！此运行的完整日志可在以下位置找到： npm ERR！C:\Users\kuhan\AppData\Roaming\npm-cache\u logs\2021-05-13T07\u 04\u 55\u 891Z-debug.log

我尝试了多种方法来替代文件的输出，但我无法纠正以下问题

---

在深入研究代码片段和错误之前，请提供一些关于您试图解决的问题的解释

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "webpack-cli": "^4.7.0",
    "webpack-dev-middleware": "^4.2.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Production',
    }),
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
};

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
// let path = require('path');

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        contentBase: './dist',
    },
});