Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

inlineManifestWebpackName not working #75

Closed
pldg opened this issue May 30, 2018 · 2 comments · May be fixed by #77
Closed

inlineManifestWebpackName not working #75

pldg opened this issue May 30, 2018 · 2 comments · May be fixed by #77

Comments

@pldg
Copy link

pldg commented May 30, 2018

I try to inline webpack manifest but with the following config is not working:

module.exports = {
  optimization: {
    runtimeChunk: { name: 'runtime' }
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: require('html-webpack-template'),
      inlineManifestWebpackName: 'runtime'
    }),
    new InlineManifestWebpackPlugin()
  ]
};

Note: 'runtime' is the default name for webpack manifest.

My devDependencies versions:

"html-webpack-plugin": "^3.2.0",
"html-webpack-template": "^6.2.0",
"inline-manifest-webpack-plugin": "^4.0.0",
"webpack": "^4.10.1"

What's happen

Looking inside html-webpack-template.ejs I see:

<% if (htmlWebpackPlugin.options.inlineManifestWebpackName) { %>
  <%= htmlWebpackPlugin.files[htmlWebpackPlugin.options.inlineManifestWebpackName] %>
<% } %>

Logging htmlWebpackPlugin.files, there is no plain manifest code inside this object but only a reference to 'runtime' chunk.

Solution

We can use the compilation object and add the following code to the template:

  • Add new code: set a global variable webpackManifestName above <!DOCTYPE html>
<% const webpackManifestName = htmlWebpackPlugin.options.inlineManifestWebpackName ? 
new RegExp(htmlWebpackPlugin.options.inlineManifestWebpackName, 'g') : '' %>
  • Replace the old inlineManifestWebpackName logic with a new one
<% if (webpackManifestName) { %>
    <script type="text/javascript">
      <% const webpackManifest = htmlWebpackPlugin.files.js
      .filter( file => file.match(webpackManifestName) ); %>

      <%= compilation.assets[webpackManifest].source() %>
    </script>
<% } %>
  • Modify the original code used to link the chunks: add some logic to prevent the manifest to be linked if its set as inline
<% Object.keys(htmlWebpackPlugin.files.chunks)
  .filter(chunk => webpackManifestName ? !chunk.match(webpackManifestName) : chunk)
  .forEach(chunk => {
    if (htmlWebpackPlugin.files.jsIntegrity) { %>
      <script
        src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
        type="text/javascript"
        integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[chunk].entry)] %>"
        crossorigin="<%= webpackConfig.output.crossOriginLoading %>">
      </script>
    <% } else { %>
      <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" type="text/javascript"></script>
    <% } %>
<% }) %>

Note: InlineManifestWebpackPlugin is not strictly necessary, in this case it's used to delete runtime.js chunk in the dist/ folder.
@rmunch
Copy link

rmunch commented Jun 16, 2018

I ran into this issue as well - @pldg 's solution worked with one alteration to support Webpack's publicPath config.

<% if (webpackManifestName) { %>
<script type="text/javascript">
    <% const webpackManifest = htmlWebpackPlugin.files.js
        .filter( file => file.match(webpackManifestName) )[0]
        .replace(webpackConfig.output.publicPath, '') %>

    <%= compilation.assets[webpackManifest].source() %>
</script>
<% } %>

@pldg pldg mentioned this issue Jun 21, 2018
Open
@pldg
Copy link
Author

pldg commented Jun 21, 2018

Would be nice a solution that works without adding InlineManifestWebpackPlugin to delete dist/runtime.js but for now I'm closing this issue.

@pldg pldg closed this as completed Jun 21, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: inline manifest, issue 75
2 participants
@rmunch @pldg