How to generate an assetMap in apps?

[NullVoxPopuli]

pre embroider, we'd generate an asset map via:

// ember-cli-build.js
    fingerprint: {
      generateAssetMap: true,

but under embroider this option has no effect.

I've been exploring some options, and will record my progress here.
One option I'd really love to have is to shove the assetConfig in the index.html so I don't have to load it.
It seems that only assets-webpack-plugin provides that capability, as described in the README, but I've been unable to get it to work.
So, in the mean time, since in my particular app, I don't need the asset map on load, I've included this HTML for when I do want to test out using the manifest.

    <script defer async src="{{rootURL}}manifest.js"></script>

of note, the plugins all output JSON, but they all provide transform options for converting to JS, For example:

processOutput: (assets) => 'window.assetMap = ' + JSON.stringify(assets),

but, because I haven't gotten anything behaving the way I want yet, I'm going to leave things as JSON for brevity.

things to figure out:

• how to get CSS assets included in these manifests
• how to get JSON assets included in these manifests

for reference, the files in dist

limber/frontend/dist on  asset-map-shadow-dom [$✘!?] 
❯ ag -g "(js)|(json)|(css)|(md)" --ignore *.map
transpilation-worker.js
ember-repl/component-map.js
samples/live-hbs.md
samples/styleguide-demo.md
samples/repl.md
samples/live-js.md
monaco/preconfigured.css
monaco/editor.main.css
monaco/preconfigured.js
monaco/editor/editor.main.js
monaco/editor/editor.worker.js
monaco/editor/editor.main.css
monaco/language/typescript/ts.worker.js
monaco/language/json/json.worker.js
monaco/language/css/css.worker.js
monaco/language/html/html.worker.js
mho-importmap.json
codemirror/preconfigured.js
testem.js
assets/chunk.a66ac7ad33c0c0124143.js
assets/test-support.css
assets/chunk.424d14eef482d6a5d3db.js
assets/limber.css
assets/chunk.ea19c1816bc2f6e21bb7.js
assets/chunk.3cd229a07e4699a46c06.js
assets/chunk.79cb30d3ab18c80183bc.js
assets/manifest-webpack-assets-manifest.json
assets/vendor.css
assets/test-support.js
assets/chunk.35accb2b1df8bae5c37d.js
assets/chunk.380ffc2085db2f4c6983.js
assets/chunk.5561052f2fffe029e4fb.js
assets/manifest-webpack-manifest-plugin.json
assets/chunk.c68b76ed04f3f5b4da69.js
assets/chunk.3c36e3b43554e62ec32f.js
assets/chunk.7e607b5b2a53db6d9bbf.js
assets/vendor.js
assets/chunk.9ae9ab513cb149c96d9c.js
assets/chunk.330ab310667c52505256.js
assets/manifest-assets-webpack-plugin.js
assets/chunk.5fb71816576a0eba41bf.js

webpack-manifest-plugin

• js
• css
• json

config

          new WebpackManifestPlugin({
            fileName: 'manifest-webpack-manifest-plugin.json',
            // serialize(manifest) {
            //   return `window.assetMap = ${manifest}`;
            // },
          }),

output

❯ cat dist/assets/manifest-webpack-manifest-plugin.json | jq
{
  "assets/limber.js.js": "/assets/chunk.35accb2b1df8bae5c37d.js",
  "assets/test.js.js": "/assets/chunk.ea19c1816bc2f6e21bb7.js",
  "chunk.js": "/assets/chunk.c68b76ed04f3f5b4da69.js",
  "manifest-webpack-assets-manifest.json": "/assets/manifest-webpack-assets-manifest.json"
}

assets-webpack-plugin

• js
• css
• json

config

          new WebpackAssetsManifest({
            output: 'manifest-webpack-assets-manifest.json',
            writeToDisk: true,
          }),

output

❯ cat dist/assets/manifest-webpack-assets-manifest.json | jq
{
  "assets/limber.js.js": "chunk.35accb2b1df8bae5c37d.js",
  "assets/test.js.js": "chunk.ea19c1816bc2f6e21bb7.js",
  "chunk.330ab310667c52505256.js": "chunk.330ab310667c52505256.js",
  "chunk.380ffc2085db2f4c6983.js": "chunk.380ffc2085db2f4c6983.js",
  "chunk.3c36e3b43554e62ec32f.js": "chunk.3c36e3b43554e62ec32f.js",
  "chunk.3cd229a07e4699a46c06.js": "chunk.3cd229a07e4699a46c06.js",
  "chunk.424d14eef482d6a5d3db.js": "chunk.424d14eef482d6a5d3db.js",
  "chunk.5561052f2fffe029e4fb.js": "chunk.5561052f2fffe029e4fb.js",
  "chunk.5fb71816576a0eba41bf.js": "chunk.5fb71816576a0eba41bf.js",
  "chunk.79cb30d3ab18c80183bc.js": "chunk.79cb30d3ab18c80183bc.js",
  "chunk.7e607b5b2a53db6d9bbf.js": "chunk.7e607b5b2a53db6d9bbf.js",
  "chunk.9ae9ab513cb149c96d9c.js": "chunk.9ae9ab513cb149c96d9c.js",
  "chunk.a66ac7ad33c0c0124143.js": "chunk.a66ac7ad33c0c0124143.js",
  "chunk.c68b76ed04f3f5b4da69.js": "chunk.c68b76ed04f3f5b4da69.js"
}

webpack-assets-manifest

• js
• css
• json

config

          new AssetsWebpackPlugin({
            filename: 'manifest-assets-webpack-plugin.js',
            path: path.join(__dirname, 'public/assets'),
            metadata: {
              rootURL,
              isProduction,
            },
          }),

output

❯ cat dist/assets/manifest-assets-webpack-plugin.json | jq
{
  "assets/limber.js": {
    "js": "/assets/chunk.35accb2b1df8bae5c37d.js"
  },
  "assets/test.js": {
    "js": "/assets/chunk.ea19c1816bc2f6e21bb7.js"
  },
  "": {
    "js": [
      "/assets/chunk.3c36e3b43554e62ec32f.js",
      "/assets/chunk.7e607b5b2a53db6d9bbf.js",
      "/assets/chunk.5fb71816576a0eba41bf.js",
      "/assets/chunk.79cb30d3ab18c80183bc.js",
      "/assets/chunk.a66ac7ad33c0c0124143.js",
      "/assets/chunk.5561052f2fffe029e4fb.js",
      "/assets/chunk.c68b76ed04f3f5b4da69.js",
      "/assets/chunk.330ab310667c52505256.js",
      "/assets/chunk.424d14eef482d6a5d3db.js",
      "/assets/chunk.3cd229a07e4699a46c06.js",
      "/assets/chunk.9ae9ab513cb149c96d9c.js",
      "/assets/chunk.380ffc2085db2f4c6983.js"
    ],
    "json": [
      "/assets/manifest-webpack-assets-manifest.json",
      "/assets/manifest-webpack-manifest-plugin.json"
    ]
  },
  "metadata": {
    "rootURL": "/",
    "isProduction": false
  }
}

Something interesting about this plugin, is that with a couple extra options,

            includeFilesWithoutChunk: true,
            entrypoints: true,

we get this output

❯ cat dist/assets/manifest-assets-webpack-plugin.json | jq
{
  "assets/limber.js": {
    "js": [
      "/assets/chunk.5fb71816576a0eba41bf.js",
      "/assets/chunk.c68b76ed04f3f5b4da69.js",
      "/assets/chunk.35accb2b1df8bae5c37d.js"
    ]
  },
  "assets/test.js": {
    "js": [
      "/assets/chunk.5fb71816576a0eba41bf.js",
      "/assets/chunk.a66ac7ad33c0c0124143.js",
      "/assets/chunk.c68b76ed04f3f5b4da69.js",
      "/assets/chunk.ea19c1816bc2f6e21bb7.js"
    ]
  },
  "": {
    "js": [
      "/assets/chunk.3c36e3b43554e62ec32f.js",
      "/assets/chunk.7e607b5b2a53db6d9bbf.js",
      "/assets/chunk.79cb30d3ab18c80183bc.js",
      "/assets/chunk.5561052f2fffe029e4fb.js",
      "/assets/chunk.330ab310667c52505256.js",
      "/assets/chunk.424d14eef482d6a5d3db.js",
      "/assets/chunk.3cd229a07e4699a46c06.js",
      "/assets/chunk.9ae9ab513cb149c96d9c.js",
      "/assets/chunk.380ffc2085db2f4c6983.js"
    ],
    "json": [
      "/assets/manifest-webpack-assets-manifest.json",
      "/assets/manifest-webpack-manifest-plugin.json"
    ]
  },
  "metadata": {
    "rootURL": "/",
    "isProduction": false
  }
}

[NullVoxPopuli]

To see what webpack thinks it's done after compilation, this plugin can be addded:

  class DebugPlugin {
    apply(compiler) {
      compiler.hooks.done.tap('my-plugin-name', (stats) => {
        console.log(stats);
        // debugger
      });
    }
  }
  // ...
  plugins: [
    new DebugPlugin(),
  ]

helpful resources:

• https://webpack.js.org/contribute/writing-a-plugin/
• https://webpack.js.org/api/compiler-hooks/

Also

JOBS=1 NODE_OPTIONS="--inspect-brk" ember build --environment=production

with debugger placed in the plugin is helpful

[NullVoxPopuli]

Looks like I've been looking in the wrong place the whole time -- styles are minified / hashed / written outside of the webpack process here: https://github.com/embroider-build/embroider/blob/master/packages/webpack/src/ember-webpack.ts#L103

So, it looks like I may need to add manifest writing to embroider itself. Probably good to do anyway? 🤷

[NullVoxPopuli]

#995

[ef4]

styles are minified / hashed / written outside of the webpack process here:

Only "legacy" styles. Webpack itself also handles styles that get imported into the module graph.

[NullVoxPopuli]

What are modern styles? Should I get rid of my app.css?
Like..import css from app.js?

import './styles/something-not-called-app.css';