入口点未定义 = index.html 使用 HtmlWebpackPlugin

Posted 2023-02-22

【中文标题】入口点未定义 = index.html 使用 HtmlWebpackPlugin

【英文标题】：Entrypoint undefined = index.html using HtmlWebpackPlugin

【发布时间】：2019-01-31 10:43:06

【问题描述】：

我正在使用 Webpack 4 并且正在创建配置文件，当尝试使用 htmlWebpackPlugin 时，它在控制台上得到了这个：Entrypoint undefined = index.html，它打开了浏览器并且确实出现了 HTML，但我在控制台上收到这个奇怪的消息，如何解决这个问题？

这就是我的配置文件的样子：

'use strict'

const webpack = require('webpack')
const  join, resolve  = require('path')

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

module.exports = 
  mode: 'development', // dev
  devtool: 'cheap-module-eval-source-map', // dev
  entry: join(__dirname, 'src', 'index.js'),
  output: 
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  ,
  module: 
    rules: [
      
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      
    ]
  ,
  resolve: 
    extensions: ['*', '.js', '.jsx']
  ,
  devServer: 
    contentBase: resolve(__dirname, 'build')
  ,
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin(
      template: join(__dirname, 'public', 'index.html')
    ),

    new webpack.HotModuleReplacementPlugin(), // dev
    new webpack.NoEmitOnErrorsPlugin() // dev
  ]

【问题讨论】：

显示你的目录结构 你的 index.js 在哪里？你的 index.html 在哪里？这将有助于调试问题

index.js 位于 src 文件夹内。 index.html 位于 public 文件夹中。没有什么比这更多了。 Webpack 配置位于根文件夹中，.babelrc 与 "presets": ["env", "react"] .

【参考方案1】：

通过在 webpack.config.js 中添加这个，我的错误得到了修复：

    stats:  children: false , //to fix the error-Entrypoint undefined=index.html  
      plugins:[  
          new HtmlWebpackPlugin(  
             template: './index.html'  
          )  
      ]

【参考方案2】：

plugins: [
      ...
      new HtmlWebPackPlugin(
        title: '...',
        template: path.resolve(folderSrc, 'index.html'),
        filename: 'index.html',
        hash: true
      )
    ]

【参考方案3】：

根据HtmlWebpackPlugin 的创建者的说法，这只是一条毫无意义的日志消息和一个可忽略的外观问题。有关该问题，请参阅 this comment。

【参考方案4】：

这似乎是模板扩展触发不需要的加载器的问题。如果模板的扩展名更改为任何其他插件将起作用。

如果你使用默认的 webpack 模板系统（EJS，从 webpack 4 开始），使用ejs 是有意义的，因为模板不再是有效的html：

new HtmlWebpackPlugin(
    // it works without 'path.resolve()'. No need for 'filename', defaults to 'index.html'
    template: "./public/index.ejs",
),

webpack 默认认为模板是 EJS 并且会使用适当的加载器自动处理它。如果您使用任何其他模板系统，则必须添加相应的加载器。有关official documentation 的更多信息。

【讨论】：

这对我来说并没有消除未定义的消息。

【参考方案5】：

试试这个；您可能制作了错误的模板路径：

 new HtmlWebpackPlugin(
        template: resolve(__dirname, 'src/public', 'index.html'),
        filename: './index.html'
      ),

如果 public 在 src 文件夹中，这应该可以。这是我的假设。 如果问题仍然存在，请告诉我。

【讨论】：

你错了，src 是组件所在的位置，public 是静态文件所在的位置，就像 index.html。我注意到这条消息只出现在webpack-dev-server 上，不仅对我来说，对包括 Youtube 上的教程在内的很多人来说，它似乎是无害的，我可以通过使用 stats: children: false 来摆脱它

很高兴听到这个消息。终于修好了。

@xahovuzu 你是怎么解决的？请发布答案。谢谢！

@xahovuzu 你解决过这个问题吗？它一直困扰着我，我无法在任何地方找到解决方法。

@xahovuzu 这不仅发生在 web 开发服务器上，当我运行 webpack --mode production 时也会发生这种情况