简体   繁体   中英

webpack - can't access jQuery on index.html

I use angular 2 class seed, which uses webpack.

I got jQuery running successfully in my app (after the loading is done I can use $).

but now I'm trying to use jQuery at index.html, and it says Uncaught ReferenceError: $ is not defined - because I want to add a div in the "loading..." phase, and remove it after the first server response.

my index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet"  href="index.css">
  <link rel="icon" sizes="32x32" href="/assets/icon/favicon-32x32.png" type="image/png">
  <link rel="icon" sizes="96x96" href="/assets/icon/favicon-96x96.png" type="image/png">
  <link rel="icon" sizes="16x16" href="/assets/icon/favicon-16x16.png" type="image/png">

  <title><%= htmlWebpackPlugin.options.title %></title>

  <meta name="description" content="<%= htmlWebpackPlugin.options.title %>">

  <!-- base url -->
  <base href="<%= htmlWebpackPlugin.options.metadata.baseUrl %>">



</head>

<body>

  <app>
    Loading...
  </app>

  <% if (htmlWebpackPlugin.options.metadata.isDevServer && htmlWebpackPlugin.options.metadata.HMR !== true) { %>
  <!-- Webpack Dev Server reload -->
  <script src="/webpack-dev-server.js"></script>
  <% } %>

  <script>

       console.log($, "Jquery will be undefined.");


  </script>

</body>
</html>

how can I access jQuery in that "loading..." phase?

Have to tried adding a script tag before the bundle?

U need to load jQuery separately from the webpack bundle. if you must.

When the app is fully loaded, you have the bundle ready and ng2 will bootstrap over the <app> , by that time, ur jQuery loader is irrelevant.

i would try and load the jQuery script in the <head> .

Please Note

This may be an anti-pattern - loading jQuery library just to implement a loader or a loading feature may cost lot more performance rather than implementing it in vanilla js.

After the app has fully loaded and your jQuery operation is done, the entire lib will have no use in your app.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM