配置Webpack时出现Entrypoint html-webpack-plugin错误求助

嘿，我仔细看了你的问题和所有配置文件，发现了几个关键问题，修正后应该就能解决你的困境了：

1. 配置文件命名错误 #

你提到配置文件叫webpackconfig.js，但Webpack默认只会识别webpack.config.js作为配置文件。这就导致Webpack没读到你的自定义配置，用默认配置跑了起来，才会出现那个奇怪的html-webpack-plugin输出。
解决办法：把你的配置文件重命名为webpack.config.js。

2. Webpack Output配置的语法错误 #

看你webpack配置里的output部分，path.join(__dirname, '/bundle')前面少了path:，这是个语法错误，导致整个output配置无效：

// 错误写法
output: {
 path.join(__dirname, '/bundle'),
 filename: 'index_bundle.js'
}

// 修正后
output: {
 path: path.join(__dirname, '/bundle'),
 filename: 'index_bundle.js'
}

3. Babel预设不匹配+配置冲突 #

你的webpack配置里babel-loader指定了presets: ['es2015', 'react']，但你devDependencies里装的是babel-preset-env（这是babel-preset-es2015的替代方案，更灵活），根本没装babel-preset-es2015，同时你还有.babelrc文件，这里容易出现配置冲突。
解决办法二选一：

• 要么修改webpack配置里的preset，和已安装的依赖对应：

  query: {
    presets: ['env', 'react']
  }
  

• 要么直接删掉webpack配置里的query部分，用.babelrc统一配置（更推荐），你的.babelrc可以写成：

  {
    "presets": ["env", "react"]
  }
  

4. 最后检查模板路径 #

确认你的index.html确实和配置文件在同一目录下，HtmlWebpackPlugin的template: './index.html'路径是正确的，这个应该没问题，但前面的错误修复后，插件就能正常工作了。

做完这些修改后，先确保所有依赖都正确安装（可以跑一遍npm install），然后执行npm start，应该就能正常启动开发服务器，不会再出现之前的错误信息了。

内容的提问来源于stack exchange，提问作者Muhammad Nabeel