[已解决]如何利用webpack将js文件打包成json文件

Question

业务背景

• 用webstorm编写小程序
• 有一个app.json文件存放所有页面路径
• 因为有上好几十个页面,这样罗列下来感觉非常混乱,后期要找东西的时候很麻烦
• 所以想加注释进行分类

示例代码

{
  "pages": [
    // 用户相关
    "pages/window/window",
    "pages/ptp/ptp",
    "pages/detail2/detail2",
    "pages/detail/detail",
    "pages/doubleroom/room/room",
    "pages/mine/mine",
    "pages/player/index/index",
    "pages/main/main",
    // 商品相关
    "pages/doubleroom/roomlist/roomlist",
    "pages/doubleroom/roomname/roomname",
    "pages/minezb/minezb",
    "pages/zbappintosc/zbappintosc",
    "pages/index/index",
    "pages/mysc/mysc",
    // 订单相关
    "pages/changegg/changegg",
    "pages/ggs/ggs",
    "pages/bjgg/bjgg",
    "pages/zpzb/zpzb",

问题描述

• 但是json文件不支持注释
• 这样写在小程序开发者工具中会报错

自己尝试

• 用过mpvue
• 他们的页面信息都是配置在main.js文件里面的pages参数
• 最后自动编译成了app.json

但是不知道mpvue是怎么实现的

期望的结果

通过一个webpack插件什么东西的,怎么实现我的需求呢?将下面这个js文件打包成json文件

export default {
  pages: [
    // 用户相关
    'pages/a',
    // 订单相关
    'pages/b
  ]
}

Answer 1

杀鸡焉用牛刀？

const pages = require('./pages.js')

fs.writeFileSync('pages.json', JSON.stringify(pages))

如果需要集成到webpack，可以用这个插件https://www.npmjs.com/package...：

const pages = require('./pages.js')

new GenerateJsonPlugin(
  'my-file.json',
  pages,
)

Answer 2

json.stringify