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

时间:2017-01-21 17:06:19

标签: jquery angular webpack

我使用角度2类种子,它使用webpack。

我在我的应用程序中成功运行了jQuery(加载完成后我可以使用$)。

但现在我尝试在index.html上使用jQuery,它说Uncaught ReferenceError: $ is not defined   - 因为我想在" loading ..."中添加一个div。阶段,并在第一次服务器响应后删除它。

我的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>

如何在那里访问jQuery&#34; loading ...&#34;相位θ

1 个答案:

答案 0 :(得分:0)

必须尝试在捆绑包之前添加WKUserContentController标记吗?

你需要从webpack包中单独加载jQuery。如果你必须的话。

当应用程序完全加载时,您已准备好捆绑包,而ng2将在script上进行引导,到那时,您的jQuery加载器无关紧要。

我会尝试在<app>中加载jQuery script

请注意

这可能是一个反模式 - 加载jQuery库只是为了实现一个加载器或加载功能可能会花费更多的性能,而不是在vanilla js中实现它。

在应用程序完全加载并且您的jQuery操作完成后,整个lib将无法在您的应用程序中使用。