title: Webpack function to generate HtmlWebpackPlugin Instances - undefined
body: <p>I'm trying to configure webpack to generate <code>HtmlWebpackPlugin</code> instances according to how many <code>.handlebars</code> files I have in the Source folder.</p>
  
  <p>The problem here is that even though inside the function everything comes back correctly, (names, file directories etc), when I try to call the function in the plugins section of webpack, I get nothing. By nothing, I mean I get no errors but when the server starts (the dev server), I get 'Cannot get' on the pages. </p>
  
  <p>I'm pretty sure I am doing (or thinking something wrong) here, but why doesn't it generate the instances for me as it should?</p>
  
  <p>webpack config:</p>
  
  <pre><code>var path = require('path');
  var MiniCssExtractPlugin = require("mini-css-extract-plugin");
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var fs = require('file-system');
  const templateFiles = fs.readdirSync(path.resolve(__dirname, "./Source/"));
  //const devMode = process.env.NODE_ENV !== 'production'
  const generateHtml = () =&gt; {
      templateFiles.forEach((file) =&gt; {
          if (file.indexOf(".handlebars") &gt; -1) {
  
              const name = file.split(".")[0];
              const fileName = '.Source/' + file;
              console.log("the file name@");
              console.log(fileName);
              return new HtmlWebpackPlugin({
                  title: name,
                  fileName: name + ".html",
                  template: fileName
              });
          }
      });
  
  };    
  const publicPath = '/';
  
  module.exports = {
      // set this to your entry point - make sure you go in there and request the css file that you need to be built
      entry: {
          index: "./Source/js/index.js"
      },
  
  
      output: {
          //destination (dist) folder
  
          path: path.resolve(path.join(__dirname, 'Build')),
  
  
  
  
          filename: path.join('js', "bundle-[name].js"),
          //folder where there actual server will throw files in
          publicPath: publicPath,
      },
  
      // create a map file for debugging
      devtool: 'source-map',
  
      module: {
          rules: [
              {
                  test: /\.(sa|sc|c)ss$/,
                  exclude: /node_modules/,
                  use: [{
                      loader: MiniCssExtractPlugin.loader,
                  },
                  {
                      loader: "css-loader", options: {
                          sourceMap: true
                      }
                  }, {
                      loader: "sass-loader", options: {
                          sourceMap: true
                      }
                  }]
  
              },
              {
                  test: /\.(png|jpg|gif)$/,
                  use: [
                      {
                          loader: 'file-loader',
                          options: {
                              name: '[name].[ext]',
                          },
                      },
                  ],
              },
              {
                  test: /\.handlebars$/,
                  loader: "handlebars-loader"
              }
          ],
      },
      watch: false, // change this to true to keep webpack running
  
      plugins: [
          new MiniCssExtractPlugin({
              //define actual folder structure to your style.css (the output)
              //the scss file will be automatically retrieved from your index.js (or whatever the entry point you defined is)
              filename: path.join('css', "style.css"),
          }),
          //serve my own html template and define where it is. Css injection implied.
          generateHtml()
      ],
      //open the dev server on command 'npm start' or 'npm run start:dev'
      devServer: {
          contentBase: path.join('index.handlebars'),
          compress: true,
          port: 3000
      }
  };`
  </code></pre>