背景:有个网站项目,其中有些文档内容,以 md 形式放在固定一个文件夹内。
现在希望每次网站构建的时候,能自动扫描文件夹内的文件,根据文件名及内容来生成一个目录索引,比如:
const articleList = [
{
filename: 'xxxx',
title: 'xxxx',
content: 'xxxx',
},
]
项目是用的 umi 框架,使用 webpack 5 来打包的。
目前初步想法是通过给 webpack 写 loader 或者 plugin 的方式来实现。
但是没研究清楚具体该用 loader 还是 plugin,如果用 plugin 的话,该在哪里做 hook ?生成的内容最好是仅存在于构建阶段或者结果中。
求大神指点。
1
SoloCompany 2021-07-10 17:22:58 +08:00 via iPhone 2
那要看你的目标是什么
loader 是用来生产 module 的 plugin 才可以构建 asset |
2
g1f9 2021-07-10 18:01:44 +08:00 via iPhone 1
如果想以字符串的形式导入,用 raw-loader 就行了,require.context 可以解决你扫描的问题
|
3
DiamondYuan 2021-07-10 18:07:02 +08:00 1
如果是 umi 的项目,可以写一个简单的 umi 插件。
在构建时使用 nodejs 读取文件夹,输出到产物里。 |
4
JerryY 2021-07-10 20:01:56 +08:00 1
如果我没理解错你的意思,你这个场景应该是用 plugin 来弄。hook 的时机你这个例子不用太过于讲究,因为只是读取项目的文件,不依赖于项目构建 /编译某一阶段的某些信息。生成的内容也是都可以的,最后可以 emit 一个 json 文件。
|
5
EPr2hh6LADQWqRVH 2021-07-10 20:32:39 +08:00 via Android
你这东西和 webpack 无关,自己写个脚本干这件事
非得弄成 webpack 插件下次这玩意升级的时候有你好受 |
6
ElmerZhang OP 感谢楼上各位,有一些思路了,我再研究研究
|
7
FallenMax 2021-07-10 23:49:42 +08:00 1
推荐写脚本,不要依赖 webpack 专门特性
|
8
godblessumilk 2021-07-11 12:19:43 +08:00 via Android
同上,建议用 shell 脚本去做,因为 shell 脚本的 api 由操作系统提供,万年不变。前端的工程化工具目前没有统一的,一年一个大版本是常事,webpack 的底层依赖也是 node,node 已经被创始人放弃了,虽然生态很繁荣
|
9
towry 2021-07-11 17:00:38 +08:00
我更相信 nodejs 比他的网站存活的长久
|