Update for Webpack 4

[ruszki]

Resolves #23

[jouni-kantola]

@ruszki: Thank you very much for the PR 🥇 I'm sorry I haven't replied until now; I apologise.

I've been testing your updates, and the following bits I've verified works:

• manifest.json is dropped if configured to do so
• Chunk manifest is extracted from runtime
• script tag is injected into the resulting HTML file generated by html-webpack-plugin

However, for me the actual manifest.json contains only an empty object. This repo/branch is good for verifying the functionality: https://github.com/jouni-kantola/webpack-output-by-build-type/tree/inline-chunk-manifest-webpack-4

1. If I run without inline-chunk-manifest-webpack the app.js file contains:

script.src = __webpack_require__.p + "" + ({}[chunkId]||chunkId) + "." + {"0":"26127e76b37f4c6b009a","1":"219d2ef64bc371d00ed4","2":"df49e3b2b0df799fb05c","3":"5e62fd0175a2093fa673"}[chunkId] + ".dev.js";

2. Toggle inline-chunk-manifest-webpack on, chunk manifest is extracted:

script.src = __webpack_require__.p + window["webpackManifest"][chunkId];

However, the contents of manifest.json is {} which results in the global webpackManifest variable to have been set to:

<script type="text/javascript">window.webpackManifest={}</script>

As I currently have quite little time to work on the plugin, I truly appreciate you taking the time to do the necessary updates to get the plugin to work with webpack@4 and [email protected]. If you have time to look at these last bits as well, it'd be super!

Thanks again for the effort! ⭐️

[frafajec]

@jouni-kantola Hello, is there a plan to wrap this up anytime soon? I see you are close to solving it :)

[4lph4-Ph4un]

How's it going with this one? :) Waiting eagerly too!

[bohdanbirdie]

@jouni-kantola any updates on this one? 🙂 merge will be highly appreciated

[whizkydee]

What's up here @jouni-kantola? Any updates?

[dadede999]

no updates?

[jouni-kantola]

I'll reiterate the comment I made in the issue for reaching webpack 4 here as well: https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin/issues/23#issuecomment-422313374

[jouni-kantola]

As stated above in this PR (https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin/pull/24#issuecomment-379070150), I couldn't get inline-chunk-manifest-html-webpack-plugin to create the chunk manifest properly with this update. To stress, I have not done any work at all on it since my comment. Has anyone else successfully used the update from the PR to get a proper chunk manifest injected in the page? If so, please create a gist with config and dependencies referenced in package.json.

I'll gladly take on more maintainers working on this plugin, and moving this update into goal would be a first good step.

[jouni-kantola]

@whizkydee: We can continue the discussion here. It'd be awesome if you want to continue maintaining inline-chunk-manifest-html-webpack-plugin. I've pushed the code I used for testing this PR. Instead of using npm link I now made a copy straight off. If you want a pretty small scope for trying stuff out, you can clone that repo. Here goes: https://github.com/jouni-kantola/webpack-output-by-build-type/tree/inline-chunk-manifest-webpack-4

[whizkydee]

Alright. Great! I'll just check the repo now and look into the code later in the day.

[ruszki]

I would like to add that we successfully use this version with the following config of optimization field for Webpack version ~4.1.1. It works probably because runtimeChunk is enabled. At least, that's how I remember.

{
    splitChunks: {
            maxAsyncRequests: 3,
            cacheGroups: {
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true
                },
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "components",
                    chunks: "all",
                    priority: -10
                }
            }
        },
    runtimeChunk: {
        name: "bootstrap"
    },
    removeAvailableModules: false,
    removeEmptyChunks: false
}

[jouni-kantola]

@ruszki: Thank you for the input. That is really helpful!

As a chunk manifest exists by default, I'd expect inline-chunk-manifest-plugin to work without setting configuration of the optimization property.

As followup testing, using the suggested config described for optimization here https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin/pull/24#issuecomment-422456613:

1. I updated to [email protected] and [email protected] which are the latest one currently. This creates a webpack chunk manifest, but still contains the chunk info in bootstrap.[hash].js. That may be related to a replacement regex not matching.
2. I went back to [email protected] as suggested, but then the chunk manifest is missing code splitted assets. Maybe that's a mismatching configuration in optimization and import().

I think there are more cases that need to be covered before merging the PR.

[HosseinAgha]

Webpack 5 is about to be released :) still no Webpack 4 support