webpack: Automatically generate 'vendor' chunk

Webpack 4 brought some handy new features, one of them being chunk
handling. It allows us to now easily split all vendor code automatically
into a 'vendor' chunk and also allows us to further differentiate between
packages, so we can e.g. create one chunk for all leaflet related stuff.

apps/budgeting/templates/a4_candy_budgeting/proposal_list.html

@@ -2,12 +2,13 @@
 {% load i18n discovery_tags static maps_tags %}
 
 {% block extra_js %}
+    <script type="text/javascript" src="{% static 'leaflet.js' %}"></script>
     <script type="text/javascript" src="{% static 'a4maps_display_points.js' %}"></script>
     {{ block.super }}
 {% endblock %}
 
 {% block extra_css %}
-    <link type="text/css" href="{% static 'a4maps_display_points.css'%}" rel="stylesheet" />
+    <link type="text/css" href="{% static 'leaflet.css'%}" rel="stylesheet" />
 {% endblock %}
 
 {% block project_action %}

apps/mapideas/templates/a4_candy_mapideas/mapidea_detail.html

@@ -2,11 +2,12 @@
 {% load static maps_tags categories_tags %}
 
 {% block extra_js %}
+    <script type="text/javascript" src="{% static 'leaflet.js' %}"></script>
     <script type="text/javascript" src="{% static 'a4maps_display_point.js' %}"></script>
 {% endblock %}
 
 {% block extra_css %}
-    <link type="text/css" href="{% static 'a4maps_display_point.css'%}" rel="stylesheet" />
+    <link type="text/css" href="{% static 'leaflet.css'%}" rel="stylesheet" />
 {% endblock %}
 
 {% block additional_labels %}

apps/mapideas/templates/a4_candy_mapideas/mapidea_list.html

@@ -2,12 +2,13 @@
 {% load i18n discovery_tags static maps_tags %}
 
 {% block extra_js %}
+    <script type="text/javascript" src="{% static 'leaflet.js' %}"></script>
     <script type="text/javascript" src="{% static 'a4maps_display_points.js' %}"></script>
     {{ block.super }}
 {% endblock %}
 
 {% block extra_css %}
-    <link type="text/css" href="{% static 'a4maps_display_points.css'%}" rel="stylesheet" />
+    <link type="text/css" href="{% static 'leaflet'%}" rel="stylesheet" />
 {% endblock %}
 
 {% block project_action %}

apps/maps/widgets.py

@@ -12,11 +12,12 @@ class MapChoosePolygonWithPresetWidget(Widget):
 
     class Media:
         js = (
+            'leaflet.js',
             'a4maps_choose_polygon.js',
         )
 
         css = {'all': [
-            'a4maps_choose_polygon.css'
+            'leaflet.css'
         ]}
 
     def get_presets(self, category):

liqd_product/templates/a4dashboard/base_dashboard_project.html

@@ -64,5 +64,5 @@
 
 
 {% block extra_js %}
-    <script src="{% static 'js/unload_warning.js' %}"></script>
+    <script src="{% static 'unload_warning.js' %}"></script>
 {% endblock %}

package.json

@@ -20,7 +20,7 @@
     "@babel/runtime": "7.5.4",
     "@fortawesome/fontawesome-free": "5.9.0",
     "acorn": "6.2.0",
-    "adhocracy4": "liqd/adhocracy4#f25e97108b6f8b924cf7fa261c03cef600dd5904",
+    "adhocracy4": "liqd/adhocracy4#06b276c9bbc9e1c572f8e28cad71aab27ad7b9e8",
     "autoprefixer": "9.6.1",
     "babel-loader": "8.0.6",
     "bootstrap": "4.3.1",

requirements/base.txt

@@ -1,5 +1,5 @@
 # A4
-git+git://github.com/liqd/adhocracy4.git@f25e97108b6f8b924cf7fa261c03cef600dd5904#egg=adhocracy4
+git+git://github.com/liqd/adhocracy4.git@06b276c9bbc9e1c572f8e28cad71aab27ad7b9e8#egg=adhocracy4
 
 # Additional requirements
 bcrypt==3.1.6

webpack.common.js

@@ -13,52 +13,53 @@ module.exports = {
     platform: [
       './liqd_product/assets/scss/platform.scss'
     ],
-    vendor: [
+    // product specific hack to work around adhocracy4/platform split
+    common_unincluded: [
       'classnames',
-      '@fortawesome/fontawesome-free/scss/fontawesome.scss',
-      '@fortawesome/fontawesome-free/scss/brands.scss',
-      '@fortawesome/fontawesome-free/scss/regular.scss',
-      '@fortawesome/fontawesome-free/scss/solid.scss',
+      'immutability-helper',
       'js-cookie',
       'react',
-      'immutability-helper',
       'react-dom',
       'react-flip-move',
-      'typeface-libre-franklin',
       'slick-carousel/slick/slick.min.js',
+      'typeface-libre-franklin',
+      '@fortawesome/fontawesome-free/scss/fontawesome.scss',
+      '@fortawesome/fontawesome-free/scss/brands.scss',
+      '@fortawesome/fontawesome-free/scss/regular.scss',
+      '@fortawesome/fontawesome-free/scss/solid.scss',
+      'datepicker/css/datepicker.min.css',
+      'leaflet/dist/leaflet.css',
+      'leaflet-draw/dist/leaflet.draw.css',
+      'leaflet.markercluster/dist/MarkerCluster.css',
+      'mapbox-gl/dist/mapbox-gl.css',
       'slick-carousel/slick/slick.css'
     ],
     a4maps_display_point: [
-      'leaflet/dist/leaflet.css',
-      'mapbox-gl/dist/mapbox-gl.css',
       'adhocracy4/adhocracy4/maps/static/a4maps/a4maps_display_point.js'
     ],
     a4maps_display_points: [
-      'leaflet/dist/leaflet.css',
-      'mapbox-gl/dist/mapbox-gl.css',
-      'leaflet.markercluster/dist/MarkerCluster.css',
       'adhocracy4/adhocracy4/maps/static/a4maps/a4maps_display_points.js'
     ],
     a4maps_choose_point: [
-      'leaflet/dist/leaflet.css',
-      'mapbox-gl/dist/mapbox-gl.css',
       'adhocracy4/adhocracy4/maps/static/a4maps/a4maps_choose_point.js'
     ],
     a4maps_choose_polygon: [
-      'leaflet/dist/leaflet.css',
-      'mapbox-gl/dist/mapbox-gl.css',
-      'leaflet-draw/dist/leaflet.draw.css',
       './apps/maps/assets/map_choose_polygon_with_preset.js'
     ],
     datepicker: [
-      './liqd_product/assets/js/init-picker.js',
-      'datepicker/css/datepicker.min.css'
+      './liqd_product/assets/js/init-picker.js'
     ],
     embed: [
       './liqd_product/assets/js/embed.js'
     ],
     'popup-close': [
       './liqd_product/assets/js/popup-close.js'
+    ],
+    unload_warning: [
+      './apps/contrib/static/js/unload_warning.js'
+    ],
+    imageUploader: [
+      'adhocracy4/adhocracy4/images/static/a4images/imageUploader.js'
     ]
   },
   output: {
@@ -140,13 +141,9 @@ module.exports = {
       $: 'jquery',
       jQuery: 'jquery'
     }),
-    new webpack.optimize.SplitChunksPlugin({
-      name: 'vendor',
-      filename: 'vendor.js'
-    }),
     new MiniCssExtractPlugin({
       filename: '[name].css',
-      chunkFilename: '[id].css'
+      chunkFilename: '[name].css'
     }),
     new CopyWebpackPlugin([
       {
@@ -155,5 +152,24 @@ module.exports = {
         flatten: true
       }
     ])
-  ]
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        leaflet: {
+          test: /[\\/]node_modules[\\/](leaflet|leaflet-draw|leaflet.markercluster|mapbox-gl|mapbox-gl-leaflet)[\\/]/,
+          name: 'leaflet',
+          chunks: 'all',
+          priority: 0
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+          priority: -100,
+          reuseExistingChunk: true
+        }
+      }
+    }
+  }
 }