HtmlWebpackPlugin - ERROR dans Erreur : Le chargeur "[...]/html-webpack-plugin - /lib/loader.js!/[...]/src/index.html" n'a pas retourné de html

Question

J'essaye de charger un modèle HTML à l'aide de HtmlWebpackPlugin et il semble que cela ne fonctionne pas. Si j'essaie de charger le plugin sans arguments, il fonctionne. Avez-vous une idée ?

Le fichier index.html que j'essaye de charger est au bon endroit, juste pour considérer

package.json:

{
 ...
  "devDependencies": {
    "@babel/core": "^7.7.4",
    "@storybook/html": "^5.2.8",
    "babel-loader": "^8.0.6",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "css-loader": "^3.2.1",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.1",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.3",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "dependencies": {
    "axios": "^0.19.0"
  }
}

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  devtool: 'source-map',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      {
        test: /.(ts|tsx)?$/,
        loader: 'ts-loader',
        include: [path.resolve(__dirname, 'src')],
        exclude: [/node_modules/]
      }
    ]
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  devServer: {
    hot: true,
    host: '0.0.0.0'
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.scss', '.css']
  }
};

Answer 1

Pour moi, la solution a été de m'assurer que tout était mis à jour.

Je suis sur Webpack 5, et tout sauf html-webpack-plugin était à jour. J'ai mis à jour html-webpack-plugin de la v4 à la v5, et le problème a disparu.

Answer 2

De Documentation du plugin html-webpack

Ne pas mettre de chargeur

Par défaut (si vous ne spécifiez aucun chargeur d'une manière ou d'une autre), une solution de secours de secours se met en place.

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

Soyez conscient, en utilisant .html car l'extension de votre modèle peut être inattendue déclencher un autre chargeur.

veuillez d'abord suivre la documentation et voir si vous avez des conflits de chargeurs.