网页3.1。jQuery被多次添加_Jquery_Django_Webpack

网页3.1。jQuery被多次添加

jquery django webpack

网页3.1。jQuery被多次添加,jquery,django,webpack,Jquery,Django,Webpack,在迁移到Webpack3之后，我注意到jQuery包含并不像我预期的那样有效我的模板结构有core/_global.html根模板，我在其中呈现常见的js和css资产，如： <head> {% render_bundle 'global' 'css' %} {% block stylesheets %}{% endblock %} {% render_bundle 'global' 'js' %} {% block header_javascrip

在迁移到Webpack3之后，我注意到jQuery包含并不像我预期的那样有效

我的模板结构有core/_global.html根模板，我在其中呈现常见的js和css资产，如：

<head>
    {% render_bundle 'global' 'css' %}
    {% block stylesheets %}{% endblock %}

    {% render_bundle 'global' 'js' %}
    {% block header_javascripts %}{% endblock %}
</head>

在global.js开头的Webpack之前的版本中，我有：

import 'expose?jQuery!expose?$!jquery'

删除此行并将webpack.config更改为：

   plugins: [
    new webpack.ProvidePlugin({
    $: "jquery",
   jQuery: "jquery",
  }),

我有以下问题-每个渲染文件global.js和register.js都包含jQuery。结果，每个文件的大小增加了大约。300 kb

我认为jQuery应该只加载一次，并且应该可以在global.js和register.js中访问

是否有任何变通方法允许以这种方式包含jQuery，并可以从不同的js文件访问它？我是否应该重构模板的结构？谢谢。

我找到了答案

基本上，在更新版本的Webpack中，我可以使用额外的插件CommonChunkPlugin。根据设置，它将所有常用的js和css从所有块中提取到单独的块中。此块稍后可以在html页面上使用

对我的情况有帮助的是：

webpack.config.js

new webpack.optimize.CommonsChunkPlugin({
  name: 'commons',
  filename: 'commons.js',
  minChunks: 2
}),

global.html页面

<script type="text/javascript" src="{% static "bundles/commons.js" %}"></script>

<script type="text/javascript" src="{% static "bundles/commons.js" %}"></script>