Webpack 3.1。 jQuery被添加了多次

在遷移到Webpack 3之後，我注意到jQuery包含的工作並不像我期望的那樣。Webpack 3.1。 jQuery被添加了多次

我的模板結構具有在我渲染共同js和css資產像核心/ _global.html根模板：

<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以前verions：

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訪問它的任何變通辦法文件？我應該重構模板的結構嗎？謝謝。

來源

2017-10-16 Alexander Tyapkov

我找到了答案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>

來源

2017-10-16 20:11:15

Webpack 3.1。 jQuery被添加了多次

回答

相關問題