webpack-无法在index.html上访问jQuery

Question

I use angular 2 class seed, which uses webpack. 我使用有角度的2类种子，该种子使用webpack。

I got jQuery running successfully in my app (after the loading is done I can use $). 我使jQuery在我的应用程序中成功运行（加载完成后，我可以使用$）。

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. 但是现在我正在尝试在index.html上使用jQuery，它说Uncaught ReferenceError: $ is not defined -因为我想在“ loading ...”阶段添加一个div，并在第一次服务器响应后将其删除。

my index.html 我的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? 在该“加载...”阶段中如何访问jQuery？

Answer 1

Have to tried adding a script tag before the bundle? 必须尝试在捆绑包之前添加script标签吗？

U need to load jQuery separately from the webpack bundle. 您需要与webpack捆绑包分开加载jQuery。 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. 当应用程序完全加载时，您便已准备好捆绑包，并且ng2将在<app>引导，到那时，您的jQuery加载器已不再相关。

i would try and load the jQuery script in the <head> . 我会尝试在<head>加载jQuery script 。

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. 这可能是一种反模式-加载jQuery库只是为了实现加载程序，或者加载功能可能会比在普通js中实现更高的性能。

After the app has fully loaded and your jQuery operation is done, the entire lib will have no use in your app. 应用程序完全加载并完成jQuery操作后，整个lib将在您的应用程序中不再使用。

webpack-无法在index.html上访问jQuery

问题描述

1 个解决方案

解决方案1
0 2017-01-22 08:45:53

webpack-无法在index.html上访问jQuery

问题描述

1 个解决方案

解决方案1 0 2017-01-22 08:45:53

解决方案1
0 2017-01-22 08:45:53