web-dev-qa-db-ja.com

エントリポイント未定義= HtmlWebpackPluginを使用したindex.html

私は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
  ]
}
node.jsreactjswebpackhtml-webpack-plugin
14
xahovuzu

これを試して;あなたは間違ったテンプレートパスを作成している可能性があります：

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

Publicがsrcフォルダーにある場合、これは機能するはずです。それは私の推測です。問題が解決しない場合はお知らせください。

7
Sakhi Mansoor

不要なローダーを起動するテンプレートの拡張に問題があるようです。テンプレートの拡張子が他のものに変更された場合、プラグインは機能します。

デフォルトの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であると見なし、適切なローダーで自動的に処理します。他のテンプレートシステムを使用する場合は、対応するローダーを追加する必要があります。 公式ドキュメント の詳細。

0
AxeEffect