Highlight.js syntax highlighting not working after webpack build

Question

Before using webpack , this code was working within a function and runs after content is loaded :

$('pre code').each(function(i, block) {
    console.log("ta da!");
    hljs.highlightBlock(block);
});

The console.log message appears, but the highlighting does not occur.

There are no build or console errors.

Highlight.js version

https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js

Highlight.js theme:

https://highlightjs.org/static/demo/styles/hybrid.css

Webpack version

"webpack": "^4.8.3"

my_entry_file.js

import '../css/hybrid.css'; 
import hljs from './highlight';

Comparison of HTML is below:

Original HTML:

<pre>
<code class="javascript">// here is a comment

On production site (not using webpack):

<pre>
<code class="javascript hljs">
<span class="hljs-comment">
// here is a comment
</span>
<span class="hljs-keyword">var</span>.... etc

On dev site (using webpack):

<pre>
<code class="javascript hljs">// here is a comment

Answer 1

I figured out the answer whilst posting, but figure the solution might be helpful to someone.

The only anomaly between production and dev sites, is that in the former I was using the minified file at:

https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js

whilst dev site (using webpack) was using:

https://github.com/isagalaev/highlight.js/blob/master/src/highlight.js

So I switched back to the minified version, and the syntax highlighting worked.

I don't know why that happens though.