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

Question

Unable to configure webpack with react

below is error :

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.entry['main'] should not contain the item '—' twice. -> A non-empty array of non-empty strings

I have configured webpack and tried

below is 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')}
   )
  ]
}

Answer 1

i think this will work

 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')}
   )
  ]
}

Answer 2

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

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

Answer 3

I solve this adding "--live-reload false" to my start command.

"scripts": {

 "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" },