Webpack 3.1。 jQuery被多次添加

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

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

 {% render_bundle 'global' 'css' %} {% block stylesheets %}{% endblock %} {% render_bundle 'global' 'js' %} {% block header_javascripts %}{% endblock %}  

第二级模板扩展根模板并将其他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

我在这里找到了答案。

基本上，在较新版本的Webpack中，我可以使用额外的插件CommonsChunkPlugin.Depends，它将所有常见的js和css从所有块中提取到单独的块中。 此块可以在以后的html页面上使用。

在我的案例中有什么帮助：

webpack.config.js

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

global.html页面