Почему я получаю сообщение об ошибке при создании HTML-файлов?

Question

Я пытаюсь прочитать все подпапки и файлы, которые находятся в каталоге 'project / lib / viewer_lib / templates', но я получаю ошибку.В случаях, когда я пытаюсь прочитать один файл с определенным именем в папке этого каталога, я могу это сделать.Ниже приведен код веб-пакета.Буду очень признателен за помощь.Следующий код создает HTML-файлы, но сгенерированные файлы не являются правильными, т.е. они неправильно собраны в HTML, мне нужно это исправить.Структура папки проекта:

• / Project
  • / assets
    • webpack.config.js
    • .babelrc
    • пакет
    • / js
      • app.js
  • / viewer_web
    • / templates
    • / login
      • login.pug
      • connect.pug
    • / main
      • index.pug
      • пользователей.pug
    • / page
      • page.pug
  • / priv
    • / static
    • / js
      • app.js
      • app.css
      • index.html

Проект

const path = require("path");
const glob = require("glob");
const fs = require("fs");
const async = require("async");

const devMode = process.env.NODE_ENV !== "production";

// styles
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

//templates
const HtmlWebpackPlugin = require("html-webpack-plugin");

const dirpath = "../lib/viewer_web/templates";

const folder = dirpath => {
  const folders = fs.readdirSync(path.resolve(__dirname, dirpath));
  return folders.map(name => `${dirpath}/${name}`);
};

const template = foldpath => {
  return foldpath.map(path_fold => {
    const files = fs.readdirSync(path.resolve(__dirname, path_fold));
    return files;
  });
};

const parse = template => {
  const handel = template.map(array => array.map(item => {
    const parts = item.split(".");
    const name = parts[0];
    const extension = parts[1];
    return {name, extension};
  }));
  return handel;
};

const directories = folder(dirpath);
const files = template(directories);

const rendering = handel => {
  const path_file = directories.map(item => {
    const files = fs.readdirSync(path.resolve(__dirname, item));
    return files.map(name => {
      const templateDir = `${item}`;
      return templateDir;
    })
  })
  return handel.map(arr => arr.map(obj => {
    return path_file.map(arr => arr.map(x => {
      const name = obj.name;
      const ext = obj.extension;
      return new HtmlWebpackPlugin({
        filename: `${name}.html`,
        template: path.resolve(__dirname, `${x}/${name}.${ext}`),
      })
    }));
  }));
}

const handel = parse(files);
const htmlPlugin = rendering(handel);
let a = [];
const f = htmlPlugin.map(x => x.map(y => y.map(z => z.map(t => a.push(t)))));

module.exports = (env, options) => ({
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    "./js/app.js": ["./js/app.js"].concat(glob.sync("./vendor/**/*.js"))
  },
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, "../priv/static/js")
  },
  devServer: {
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: { name: "img/[name].[ext]" }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, "./scss"),
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "resolve-url-loader"
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.pug$/,
        include: path.resolve(__dirname, '../lib/viewer_web/templates/main'),
        use: ["pug-loader"]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([{ from: "static/", to: "../" }]),
    new MiniCssExtractPlugin({
      filename: "app.css",
      allChunks: true
    })
    ].concat(a)
});

Answer 1

Я не мог решить это таким образом, но следующий код решил мою проблему.Я просто хотел разделить все на отдельные функции, но я запутался в этом.

const dirpath = "../lib/viewer_web/templates";

function generateHtmlPlugins(templateDir) {
  const templateFolds = fs.readdirSync(path.resolve(__dirname, templateDir));
  return templateFolds.map(name_fold => {
    const templates = fs.readdirSync(path.resolve(__dirname, `${templateDir}/${name_fold}`));
    return templates.map(files => {
      const parts = files.split(".");
      const name = parts[0];
      const extension = parts[1];
      return new HtmlWebpackPlugin({
        filename: `${name}.html`,
        template: path.resolve(__dirname, `${templateDir}/${name_fold}/${name}.${extension}`)
      });
    });
  });
}

const htmlPlugin = generateHtmlPlugins(dirpath);
let rendering = [];
htmlPlugin.map(x => x.map(y => rendering.push(y)));

Answer 2

используйте библиотеку FLASH, она будет передавать ошибки для просмотра.