How to add hash tag to static assets

Some of my components refer the assets files in a css way:

import styled from 'styled-components';
const Logo = styled.div`
     background-image:  url('/static/logo.png'),
`

I want to use CDN for all the assets in /statics folder, it is possible to give a version tag( like BUILD_ID) to these files in production?

No clue, anyone has a advice?

[taichenglu]

File: ./build-static.js

const fs = require('fs')
const path = require('path')
const execSync = require('child_process').execSync
const revHash = require('rev-hash')

const srcDir = 'static'
const distDir = 'buildstatic'
const hashData = {}

execSync(`rm -r -f ${distDir}`)

const buildStatic = (src, dist) => {
  fs.access(dist, (err) => {
    if (err) {
      fs.mkdirSync(dist)
    }

    initBuild(src, dist)
  })
}

const initBuild = (src, dist) => {
  const paths = fs.readdirSync(src)

  paths.forEach((_path) => {
    const subSrc = `${src}/${_path}`
    const subDist = `${dist}/${_path}`
    const stat = fs.statSync(subSrc)

    if (stat.isFile()) {
      const fileData = fs.readFileSync(subSrc)
      const pathObj = path.parse(subSrc)
      const hash = revHash(fileData)
      const hashDir = pathObj.dir.split(`${srcDir}/`)[1] || ''
      const hashKey = `${hashDir}/${pathObj.name}${pathObj.ext}`
      const filePath = `${path.parse(subDist).dir}/${pathObj.name}.${hash}${pathObj.ext}`

      if (pathObj.ext) {
        hashData[hashKey] = hash
        fs.writeFileSync(filePath, fileData)
      }
    } else if (stat.isDirectory()) {
      buildStatic(subSrc, subDist)
    }
  })

  fs.writeFileSync('static-hash.json', JSON.stringify(hashData))
}

buildStatic(srcDir, distDir)

run: node build-static.js

File: ./demo.js

import staticHash from 'static-hash'

const isPro = true

const staticRequire = (path) => {
  const hash = staticHash[path]
  const pathSplit = path.split('.')
  const fileName = pathSplit[0]
  const fileExt = pathSplit[1]
  const filePath = !isPro ? path : `${fileName}.${hash}.${fileExt}`

  let staticDir = '/static/'

  if (isPro) {
    staticDir = 'https://mycdn.com/static/'
  }

  return `${staticDir}${filePath}`
}

console.log(staticRequire('images/test.png'))

// <img src={staticRequire('images/test.png')} alt="" />

[faceace]

Same issue here. We tried using webpack file loader but seems not working for the current version of next.js.