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

webpackPreload not working at all #7920

Closed
mwanago opened this issue Aug 19, 2018 · 9 comments
Closed

webpackPreload not working at all #7920

mwanago opened this issue Aug 19, 2018 · 9 comments
Labels
Send a PR

Comments

@mwanago
Copy link

mwanago commented Aug 19, 2018

What is the current behavior?
I am experiencing issues while using webpackPreload.
No script with rel="preload" is added to the <head>.

Steps to reproduce

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'none',
  plugins: [
      new HtmlWebpackPlugin({template: './src/index.html'}),
  ]
};

export function divide(a, b) {
    return a / b;
}

document.addEventListener("DOMContentLoaded", () => {
    const button = document.querySelector('#divideButton');
    button.addEventListener('click', () => {
        import(
            `./utilities/divide`
            /* webpackPreload: true */
            /* webpackChunkName: "utilities" */
            )
            .then(divideModule => {
                console.log(divideModule.divide(6, 3)); // 2
            })
    });
});

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button id="divideButton">Click</button>
    </body>
</html>

I am using webpack@4.16.5.

What is the expected behavior?
I expect the <link rel="preload" as="script" href="utilities.js"> to be added.

Other relevant information:
webpack version: 4.16.5
Node.js version: 8.11.3
Operating System: Ubuntu 18.04
@montogeek
Copy link
Member

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

@sokra
Copy link
Member

sokra commented Aug 20, 2018

I think this is not yet supported by the html-plugin. You could file an issue there.

Anyway using preload in your example is incorrect. It should use prefetch instead.

Note that prefetch doesn't require html-plugin support and should work.

@mwanago
Copy link
Author

mwanago commented Aug 20, 2018

@sokra The docs do not mention the need to use html-plugin for preload.
Prefetch is working without problems.
https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

@sokra
Copy link
Member

sokra commented Aug 20, 2018

That's true. It's mentioned here: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c in the FAQ

Please send a PR to the docs adding it.

@mwanago
Copy link
Author

mwanago commented Aug 20, 2018

@sokra "When prefetch/preload is used in import()s in a entry chunk the html generation is resposible for adding the tags to the HTML. "
The prefetch works without problems for me though. Is it connected to that PR?
#7444

@sokra
Copy link
Member

sokra commented Aug 20, 2018

Is it connected to that PR?

Yes. This PR allows to use prefetch without need to generate <link> tags in the HTML. It will be injected by the js bundle instead. This is possible because prefetching starts after the initial load. Preloading starts in parallel to the js bundle, so this is not possible for preload.

@mwanago
Copy link
Author

mwanago commented Aug 20, 2018

@sokra I understand. I will work on a PR to the docs. Thanks ;)

@sokra
Copy link
Member

sokra commented Aug 21, 2018

@webpack-bot move to webpack/webpack.js.org

@sokra The docs do not mention the need to use html-plugin for preload.
Prefetch is working without problems.
https://webpack.js.org/guides/code-splitting/#prefetching-preloading-modules

That's true. It's mentioned here: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c in the FAQ

Please send a PR to the docs adding it.

@webpack-bot
Copy link
Contributor

I've moved it to webpack/webpack.js.org.

@webpack-bot webpack-bot mentioned this issue Aug 21, 2018
Closed
@HenryTSZ HenryTSZ mentioned this issue Oct 22, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Send a PR
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@montogeek @sokra @mwanago @webpack-bot