入口点 undefined = index.html 使用 HtmlWebpackPlugin

IT技术 node.js reactjs webpack html-webpack-plugin
2021-04-25 03:37:55

我正在使用 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
  ]
}
4个回答

试试这个; 您可能正在制作错误的模板路径：

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

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

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

模板的扩展触发了不需要的加载程序，这似乎是一个问题。如果模板的扩展名更改为任何其他插件，则该插件将起作用。

如果你使用默认的 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 并且会自动使用合适的加载器来处理它。如果您使用任何其他模板系统，则必须添加相应的加载程序。有关官方文档的更多信息。

plugins: [
      ...
      new HtmlWebPackPlugin({
        title: '...',
        template: path.resolve(folderSrc, 'index.html'),
        filename: 'index.html',
        hash: true
      })
    ]
其它你可能感兴趣的问题
上一篇带有 React 的 Google AMP 下一篇无法解析module“react-dom”