web-dev-qa-db-fra.com

Entrypoint undefined = index.html utilisant HtmlWebpackPlugin

J'utilise Webpack 4 et je crée le fichier de configuration. Lorsque j'essayais d'utiliser HtmlWebpackPlugin, il l'a reçu sur la console: Entrypoint undefined = index.html, il ouvre le navigateur et le code HTML apparaît, mais je reçois ce message étrange sur la console, comment résoudre ce problème?

Voici à quoi ressemble mon fichier de configuration:

'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

Essaye ça; vous faites peut-être un mauvais chemin de template:

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

Si public est dans le dossier src, cela devrait fonctionner. C'est mon hypothèse. Faites-moi savoir si le problème persiste.

7
Sakhi Mansoor

Cela semble être un problème avec l’extension du gabarit qui déclenche un chargeur indésirable. Si l'extension du modèle est modifiée, le plug-in fonctionnera.

Si vous utilisez le système de templates Webpack par défaut ( EJS , à partir de Webpack 4), il est logique d'utiliser ejs, car le modèle isn n'est plus valide html:

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

webpack considère par défaut que le modèle est EJS et le traitera automatiquement avec le chargeur approprié. Si vous utilisez un autre système de modèle, vous devrez ajouter le chargeur correspondant. Plus d'infos sur documentation officielle .

0
AxeEffect