[solved] how to use webpack to package js files into json files

Business background

  • write Mini Program with webstorm
  • there is a app.json file that holds all page paths
  • because there are dozens of pages, it is very confusing to list, and it is troublesome to find something later
  • so I want to add comments to classify

sample code

{
  "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",

problem description

  • but json files do not support comments
  • if written in this way, an error will be reported in Mini Program"s developer tool

try it yourself

  • used mpvue
  • their page information is the pages parameter
  • configured in the main.js file.
  • finally automatically compiled into app.json

but don"t know how mpvue is implemented

expected results

how can I implement my requirements through a webpack plug-in? Package the following js file into json file

export default {
  pages: [
    // 
    "pages/a",
    // 
    "pages/b
  ]
}
Apr.05,2021

how can you use a cow knife to kill a chicken?

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

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

if you need to integrate into webpack, you can use this plug-in https://www.npmjs.com/package.:

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

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

json.stringify

Menu