Question

我已经配置Django在前端使用Webpack。我的应用程序每个页面扩展的基本布局是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% load static %}
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Invoice App</title>
</head>
<body>
    <div id="app">
    {% block content %}
    {% endblock %}
    </div>
    <script src="{% static 'dist/app.bundle.js' %}"></script>
    {% block scripts %}    
    {% endblock  %}
</body>
</html>

我的Webpack入口文件index.js文件如下所示：

import $ from "jquery"

$(document).ready(function () {
    console.log('hello')
});

然后，在我的django模板之一中，我用jquery函数填充了scripts块，但是它说$未被定义，即使它位于webpack包之后，因此，在已经导入Jquery之后：

{% extends "../index.html" %}


{% block content %}
<p>Hi this is a template <p>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        console.log('Hello Template')
    });
</script>
{% endblock  %}

Answer 1

找到了解决方案：我必须将$用作全局变量，并将此规则添加到我的webpack.config.js中：

{
  test: require.resolve("jquery"),
  use: [
    {
      loader: "expose-loader",
      options: "jQuery"
    },
    {
      loader: "expose-loader",
      options: "$"
    }
  ]
}

$ $即使脚本在Webpack包之后也没有定义

1 个答案: