安装 webpack 和 babel 后 npm start 不工作

Question

我在 react-redux 中创建了一个应用程序。之后我使用下面的链接安装了 babel 和 webpack。

https://medium.com/@siddharthac6/getting-started-with-react-js-using-webpack-and-babel-66549f8fbcb8

下面是我的 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')},
       path: path.resolve(__dirname, 'build'),
   },
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
       }]
   },
   plugins:[
       new HWP(
          {template: path.join(__dirname,'/src/index.html')}
       )
   ]
}

运行“npm start”时出现以下错误

> my-app@0.1.0 start /var/www/html/SFL
> webpack-dev-server — mode development — open — hot

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array or a promise to these things.
    * configuration.entry['main'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['main'] should not contain the item '—' twice.
    * configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module which is loaded upon startup.
    * configuration.entry should be an array:
      [non-empty string]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 start: `webpack-dev-server — mode development — open — hot`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我正在尝试解决上述错误。有没有其他方法可以解决这个错误？

Answer 1

试试这个.. 还原您的更改并运行npm run eject

这将使 webpack 进入你的项目

Answer 2

试试这个删除你的 node_modules && 你的 package-lock.json

然后再次运行 npm i。

让我知道它是否有效。

Answer 3

尝试将您的 entry 更改为此（取自 create-react-app）：

entry: [ require.resolve('webpack-dev-server/client') + '?/', require.resolve('webpack/hot/dev-server'), path.join(__dirname, '/src/index.js') ]

Answer 4

您的文件夹结构应如下所示

├── webpack.config.js
├── src
│   ├── index.js