使用 webpack 配置创建反应应用程序时出现无效配置错误答案

【问题标题】：Invalid configuration error while creating a react app with webpack configuration使用 webpack 配置创建反应应用程序时出现无效配置错误
【发布时间】：2020-01-03 14:30:11
【问题描述】：

无法使用 react 配置 webpack

以下是错误：

配置对象无效。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.entry['main'] 不应包含项目 '-' 两次。 -> 非空字符串的非空数组

我已经配置了webpack并尝试了

下面是 webpack.config.js

 const path = require('path');
 const HWP = require('html-webpack-plugin');
 module.exports = {
   entry: path.join(__dirname, '/src/index.js'),
    output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist')},
module:{
   rules:[{
       test: /\.js$/,
      exclude: /node_modules/,
       loader: 'babel-loader'
    }]
  },
  plugins:[
    new HWP(
       {template: path.join(__dirname,'/src/index.html')}
   )
  ]
}

【问题讨论】：

只需使用 create-react-app 即可避免自己配置 webpack。
我知道 create-react-app。我正在尝试了解有关 webpack 的更多信息。
哪一行代码出错了？
我认为 entry 需要是一个数组或对象。试试entry: { main: path.join(__dirname, '/src/index.js') },
onfiguration.entry['main'] 不应包含两次“—”项。

标签： reactjs webpack

【解决方案1】：

我解决了这个问题，将“--live-reload false”添加到我的启动命令中。

“脚本”：{

"ng": "ng",
"start": "ng serve --live-reload false",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"build:single-spa:mf-test2": "ng build mf-test2 --prod",
"serve:single-spa:mf-test2": "ng s --project mf-test2 --disable-host-check --port NaN --live-reload false"   },

【讨论】：

【解决方案2】：

我认为这会起作用

 const path = require('path');
 const HWP = require('html-webpack-plugin');
 module.exports = {
   entry: ['./src/index.js'],
    output: {
    filename: 'build.js',
    path: path.join(__dirname, 'dist')},
module:{
   rules:[{
       test: /\.js$/,
      exclude: /node_modules/,
       loader: 'babel-loader'
    }]
  },
  plugins:[
    new HWP(
       {template: path.join(__dirname,'src/index.html')}
   )
  ]
}

【讨论】：

同样的问题。--> 无效的配置对象。 Webpack 已使用与 API 模式不匹配的配置对象进行初始化。 - configuration.entry['main'] 不应包含两次“—”项。

【解决方案3】：

如下更改 package.json 中的脚本启动命令使其工作，

"start": "webpack-dev-server --config webpack.config.js --port 3000",

【讨论】：