webpack: Update to 5 and use single endpoint

Structure things a bit more like we do in a+ and fix the admin template.
liqd · Mar 10, 2021 · 1fb9da3 · 1fb9da3
1 parent 5d55eb6
commit 1fb9da3
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 48 deletions.
diff --git a/bplan/templates/admin_base.html b/bplan/templates/admin_base.html
@@ -12,10 +12,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         {# Global stylesheets #}
-        <link rel="stylesheet" type="text/css" href="{% static 'third-party/bower_components/font-awesome/css/font-awesome.min.css' %}">
-
-        <link rel="stylesheet" href="{% static 'scss/all.compiled.css' %}" />
-
+        <link rel="stylesheet" type="text/css" href="{% static 'app.css' %}">
 
     </head>
 
@@ -50,8 +47,7 @@
 
 
         {# Global javascript #}
-        <script type="text/javascript" src="{% static 'third-party/bower_components/jquery/dist/jquery.min.js' %}"></script>
-        <script type="text/javascript" src="{% static 'third-party/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js' %}"></script>
+        <script type="text/javascript" src="{% static 'app.js' %}"></script>
         {% block extra_js %}
             {# Override this in templates to add extra javascript #}
         {% endblock %}

diff --git a/bplan/templates/base.html b/bplan/templates/base.html
@@ -12,7 +12,6 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
 
         {# Global stylesheets #}
-        <link rel="stylesheet" type="text/css" href="{% static 'vendor.css' %}">
         <link rel="stylesheet" type="text/css" href="{% static 'app.css' %}">
 
         <script type="text/javascript">
@@ -129,7 +128,6 @@
         {% endverbatim %}
 
         {# Global javascript #}
-        <script type="text/javascript" src="{% static 'vendor.js' %}"></script>
         <script type="text/javascript" src="{% static 'app.js' %}"></script>
         {% block extra_js %}
             {# Override this in templates to add extra javascript #}

diff --git a/package.json b/package.json
@@ -22,22 +22,21 @@
     "lodash": "4.17.21",
     "mapbox-gl": "1.13.1",
     "mapbox-gl-leaflet": "0.0.14",
-    "mini-css-extract-plugin": "0.12.0",
-    "node-sass": "4.14.1",
-    "postcss-loader": "3.0.0",
-    "sass": "1.26.10",
-    "sass-loader": "9.0.3",
+    "mini-css-extract-plugin": "1.3.9",
+    "node-sass": "5.0.0",
+    "postcss-loader": "4.2.0",
+    "sass-loader": "10.1.1",
     "terser-webpack-plugin": "4.2.3",
-    "webpack": "4.44.1",
+    "webpack": "5.24.2",
     "webpack-merge": "5.7.3"
   },
   "devDependencies": {
-    "webpack-cli": "3.3.12"
+    "webpack-cli": "4.5.0"
   },
   "scripts": {
     "build:prod": "webpack --config webpack.prod.js --mode production",
-    "build": "webpack --config webpack.config.js --mode development",
-    "watch": "webpack --config webpack.config.js --watch --mode development"
+    "build": "webpack --config webpack.dev.js --mode development",
+    "watch": "webpack --config webpack.dev.js --watch --mode development"
   },
   "repository": {
     "type": "git",

diff --git a/webpack.config.js → webpack.common.js b/webpack.config.js → webpack.common.js
@@ -6,18 +6,29 @@ var path = require('path')
 module.exports = {
   entry: {
     app: [
+      'angular',
+      'angular-animate',
+      'angular-loading-bar',
+      'angular-loading-bar/build/loading-bar.min.css',
+      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot',
+      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg',
+      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf',
+      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
+      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2',
+      'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
+      'font-awesome/css/font-awesome.min.css',
       'leaflet',
-      'mapbox-gl-leaflet',
-      'mapbox-gl/dist/mapbox-gl.js',
-      'mapbox-gl/dist/mapbox-gl.css',
       'leaflet/dist/leaflet.css',
       'leaflet.markercluster',
       'leaflet.markercluster/dist/MarkerCluster.css',
       'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css',
-      'leaflet-defaulticon-compatibility',
-      'angular',
-      'angular-animate',
-      'angular-loading-bar',
+      'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.min.js',
+      'lodash',
+      'mapbox-gl',
+      'mapbox-gl-leaflet',
+      './bplan/assets/scss/all.scss',
+      './bplan/assets/fonts/Arimo-Bold.ttf',
+      './bplan/assets/fonts/Arimo-Regular.ttf',
       './bplan/assets/js/app/app.js',
       './bplan/assets/js/app/shared/services/placeService.js',
       './bplan/assets/js/app/shared/controllers/viewController.js',
@@ -27,23 +38,12 @@ module.exports = {
       './bplan/assets/js/app/components/map/mapDirectives.js',
       './bplan/assets/js/app/shared/directives/sharedDirectives.js'
     ],
-    vendor: [
-      'lodash',
-      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.eot',
-      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.svg',
-      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf',
-      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff',
-      'bootstrap-sass/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2',
-      'bootstrap-sass/assets/javascripts/bootstrap/dropdown.js',
-      'font-awesome/css/font-awesome.min.css',
-      'angular-loading-bar/build/loading-bar.min.css',
-      './bplan/assets/scss/all.scss',
-      './bplan/assets/fonts/Arimo-Bold.ttf',
-      './bplan/assets/fonts/Arimo-Regular.ttf'
-    ],
-    custom: [
-      './bplan/assets/js/custom.js'
-    ]
+    custom: {
+      import: [
+        './bplan/assets/js/custom.js'
+      ],
+      dependOn: 'app'
+    }
   },
   output: {
     libraryTarget: 'this',
@@ -66,10 +66,11 @@ module.exports = {
           {
             loader: 'postcss-loader',
             options: {
-              ident: 'postcss',
-              plugins: [
-                require('autoprefixer')
-              ]
+              postcssOptions: {
+                plugins: [
+                  require('autoprefixer')
+                ]
+              }
             }
           },
           {
@@ -96,8 +97,7 @@ module.exports = {
   resolve: {
     extensions: ['*', '.js', '.jsx', '.scss', '.css'],
     alias: {
-      jquery$: 'jquery/dist/jquery.min.js',
-      'mapbox-gl$': 'mapbox-gl/dist/mapbox-gl.js'
+      jquery$: 'jquery/dist/jquery.min.js'
     },
     // when using `npm link`, dependencies are resolved against the linked
     // folder by default. This may result in dependencies being included twice.

diff --git a/webpack.dev.js b/webpack.dev.js
@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge')
+const common = require('./webpack.common.js')
+
+module.exports = merge(common, {
+  devtool: 'eval'
+})
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,4 +1,4 @@
-const common = require('./webpack.config.js')
+const common = require('./webpack.common.js')
 const { merge } = require('webpack-merge')
 const TerserPlugin = require('terser-webpack-plugin')