定制化 Next.js 打包

向输出目录添加附加文件

来到 next.config.js文件，通过 webpack 的能力直接项输出目录新增文件和写入内容。

const fs = require('fs')
const path = require('path')

let isExist = false
const nextConfig = {
  output: 'export',
  webpack(config, options) {
    const currentCommand = process.env.npm_lifecycle_event
    if (currentCommand == 'build') {
      const outDir = path.join(__dirname, 'out')
      if (!fs.existsSync(outDir)) {
        fs.mkdirSync(outDir)
      }
      const watcher = fs.watch(outDir, (event, __filename) => {
        if (!isExist) {
          if (event == 'change') {
            const fileName = '_config.text'
            const outPath = path.join(__dirname + '/out/', fileName)
            const content = `hello next.js`
            console.log('once is enough')
            fs.writeFileSync(outPath, content)
            isExist = true
          }
        }
      })
      process.on('exit', () => {
        watcher.close()
      })
    }
    return config
  },
}

module.exports = nextConfig

需要注意的是 next.js 的默认行为是在每次静态文件构建时清空输出目录（默认为 out 目录）。这是为了确保构建结果的一致性和避免旧文件的残留。

所以在新增文件的时机要正确，新增早了，最后也是会被清空，而是应该监听 out 目录开始有新增文件的时候增加我们的配置文件。