Include assets that get collapsed to a data uri string

[mtscout6]

They are currently omitted altogether, it would be nice to output that data uri into the asset json file.

[schovi]

👍 Looking for that really long!

[mtscout6]

@schovi I haven't had time to do this myself, but if you wanted to submit a pull request for it I'd happily review it and bring it in.

[schovi]

@mtscout6 I made it works in my project

I had to improve your module function ExtractAssets

function ExtractAssets(modules, requestShortener, publicPath) {
  var emitted = true;
  var assets = modules
    .map(m => {
      let name = m.readableIdentifier(requestShortener)

      if(name.slice(0,2) != "./")
        return

      name = name.slice(2, name.length)

      const assets = Object.keys(m.assets || {})

      let asset;

      if (assets.length) {
        asset = assets[0];

      } else if(m._source) {
        const source = m._source.source()
        asset = source.slice(18, source.length - 1)
      }

      if(!asset)
        return

      return {
        name: name,
        asset: asset
      };

    }).filter(m => {
      return m !== undefined;
    }).reduce((acc, m) => {
        acc[m.name] = url.resolve(publicPath, m.asset);
      return acc;
    }, {});

  return [emitted, assets];
}

As you can see there is some stupid condition to filter out assets i dont want. Otherwise stats.json is really huge and parsing takes some.

Then in my server initializer I have following

import addModulePath from 'app-module-path';

////// Fix Webpack assets
// Add assets load path
const assetsPath = path.join(__dirname, 'assets/')

addModulePath.addPath(assetsPath);

// To ignore webpack custom loaders on server.
['css', 'less', 'sass', 'styl'].forEach((ext) => {
  require.extensions['.' + ext] = () => {}
})

// Override assets requiring
let assetCache;

const getAssets = () => {
  if(assetCache)
    return assetCache

  console.log("Getting assets from webpack 'build/assets.json'")
  assetCache = JSON.parse(fs.readFileSync(path.join(__dirname, 'build/assets.json')))

  return assetCache
}

// Overiding requiring of assets
['jpg', 'jpeg', 'png', 'gif', ...].forEach((ext) => {
  require.extensions['.' + ext] = (require, path) => {
    const file = path.replace(assetsPath, "")
    require.exports = getAssets().assets[file]
  }
})

Now I can load assets if they are just url or base64 on server side. It is ugly, but it is mine and it works :)

[mtscout6]

If you want to start with a pull request we can go from there. That will give me better diffing tools to see what's changed.