Eleventy + Webpack integration, how to delay --serve?

[gasatrya]

To be honest, I am not sure what to ask, let me explain it.

I created a new Eleventy + Webpack starter template based on my last project, you can see it here . It was run smoothly, but I couldn't figure out one problem.

npm run dev

The first time you run npm run dev:

1. Eleventy will run eleventy --serve --incremental
2. Webpack
   • Process the assets
   • Generate manifest.json under _data and print the asset url.

If you see the base.njk layout, to load the assets I am using this

<link rel="stylesheet" href="/assets/{{ manifest['frontend.css'] }}">

Everything is working as expected.

npm run build

Now, if you run npm run build to build the website and the assets.

1. Run eleventy
2. Webpack to compile all the assets and add the hash to the file name, generate new manifest.json to the _data folder.

The expected result would be

HTML

<link rel="stylesheet" href="/assets/frontend.d07cd5a645.css">

manifest.json

{
  "frontend.css": "frontend.d07cd5a645.css",
}

But what I see was

HTML
Currently it read the old file name.

<link rel="stylesheet" href="/assets/frontend.css">

manifest.json

{
  "frontend.css": "frontend.d07cd5a645.css",
}

Eleventy seems run before Webpack generate the new manifest.json. But, if you re-run npm run build, Eleventy can read manifest.json correctly.

Quick note, sometimes, if you run npm run build, Eleventy can read manifest.json correctly, but if you re-run npm run dev, Eleventy still use the old file name.

Can someone help me with this?