Question

迁移到Webpack 3之后，我注意到jQuery包含的工作并不像我预期的那样。

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

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

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

第二级模板扩展根模板并将其他js和css添加到html：

{% extends "core/_global.html" %}

{% load render_bundle from webpack_loader %}
{% block stylesheets %}
    {% render_bundle 'accounts/register' 'css' %}
{% endblock %}
{% block javascripts %}
    {% render_bundle 'accounts/register' 'js' %}
{% endblock %}

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

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

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

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

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

我希望jQuery只能加载一次，它应该可以在global.js和register.js中访问

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

Answer 1

我找到了答案here。

基本上，在较新版本的Webpack中，我可以使用额外的插件CommonsChunkPlugin.Depends，它将所有常见的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>

Webpack 3.1。 jQuery被多次添加

1 个答案: