node.js - 为什么生成html文件时会出错?
问题描述
我尝试读取“project/lib /viewer_lib/templates”目录中的所有子文件夹和文件,但出现错误。如果我尝试在该目录的文件夹中读取一个具有特定名称的文件,那么我可以做到。下面是 webpack 代码。我将非常感谢您的帮助。以下代码创建html文件,但生成的文件不正确,即它们没有正确收集在html中,我需要修复它。项目文件夹结构:
- /项目
- /资产
- webpack.config.js
- .babelrc
- 包裹
- /js
- 应用程序.js
- /viewer_web
- /模板
- /登录
- 登录.pug
- 连接.pug
- /主要的
- 指数.pug
- 用户.pug
- /页
- page.pug
- /priv
- /静止的
- /js
- 应用程序.js
- 应用程序.css
- 索引.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)
});
解决方案
我无法以这种方式解决它,但以下代码解决了我的问题。我只是想把所有东西分成不同的功能,但我对此感到困惑。
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)));
推荐阅读
- spring - 异步 Spring Batch。通过 2 个步骤创建工作
- angular - 如何防止工具栏上的扩展面板溢出?
- r - 取一行中的第一个和最后一个观察值之间的差异,其中每一行都不同
- javascript - 如何使用 react-navigation 进行条件路由?
- .htaccess - 如何使用 htaccess 重写 URL 以删除 PHP 中的问号?
- twilio - 使用新 AMD API 的 Twilio Studio 调用流程
- javascript - Javascript 自动将某些文本转换为样式等标签
- matlab - 如何修复“saveas”代码以使用“strcat”保存包含 simulink 仿真结果的 pdf 文件?
- ios - iOS 应用版本的 Firebase A/B 测试正则表达式不起作用
- apache-zookeeper - Accumulo 是否真的需要列出所有 Zookeeper 服务器?