Improve and simplify the webpack builds

I've now also figured out why loading of chunks failed when running
using converse.js (but not when using converse.min.js or when running `make watch`).

When running `make dist`, first `converse.js` and `converse.min.js` were
built with `mode` set to `development` (via `webpack.dev.js`) and then
`converse.min.js` was again built with mode set to `production` (via
`webpack.prod.js`).

When running only one build or the other (either `webpack.dev.js` or
`webpack.prod.js`) then the loading of chunks didn't fail, so it had
something to do with running both builds back to back.

I've now removed the `.dev.js` webpack config files and instead build
the minimized and non-minimized from the same config file
`webpack.build.js`.

I did the same for the headless builds.

Makefile

@@ -148,10 +148,10 @@ devserver: node_modules
 ## Builds
 
 dist/converse.js:: node_modules
-	npm run dev
+	npm run build
 
 dist/converse.css:: node_modules
-	npm run dev
+	npm run build
 
 dist/website.css:: node_modules src/shared/styles/website.scss
 	$(SASS) --load-path=$(BOOTSTRAP) src/shared/styles/website.scss $@
@@ -191,8 +191,9 @@ src/headless/dist/converse-headless.js: src webpack/webpack.common.js node_modul
 src/headless/dist/converse-headless.min.js: src webpack/webpack.common.js node_modules @converse/headless
 	npm run headless
 
-dist:: node_modules src/* | dist/converse.js dist/converse.css dist/website.css dist/website.min.css src/headless/dist/converse-headless.min.js src/headless/dist/converse-headless.js
-	npm run prod
+dist:: node_modules src/* | dist/website.css dist/website.min.css
+	npm run headless
+	npm run build
 
 .PHONY: install
 install:: dist

package.json

@@ -29,13 +29,11 @@
     "serve": "webpack serve --config webpack/webpack.serve.js",
     "clean": "rm -rf node_modules dist *.zip src/headless/dist src/headless/node_modules",
     "headless": "webpack --config webpack/webpack.headless.js",
-    "headless-dev": "webpack --config webpack/webpack.headless.dev.js",
-    "nodeps": "webpack --config webpack/webpack.nodeps.js",
-    "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist/ npm run dev && ASSET_PATH=https://cdn.conversejs.org/dist/ npm run build",
-    "prod": "webpack --config webpack/webpack.prod.js",
-    "build": "npm run dev && npm run prod",
-    "dev": "webpack --config webpack/webpack.dev.js",
-    "watch": "webpack --watch --config webpack/webpack.dev.js",
+    "headless-dev": "webpack --config webpack/webpack.headless.js --mode=development",
+    "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist/ npm run build",
+    "build": "webpack --config webpack/webpack.build.js",
+    "dev": "webpack --config webpack/webpack.build.js --mode=development",
+    "watch": "webpack --watch --config webpack/webpack.build.js --mode=development",
     "lerna": "lerna bootstrap --hoist --ignore-scripts",
     "prepare": "npm run lerna && npm run build"
   },

webpack/webpack.prod.js → webpack/webpack.build.js

@@ -9,6 +9,7 @@ const { merge }  = require("webpack-merge");
 
 const plugins = [
     new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
+    new MiniCssExtractPlugin({filename: '../dist/converse.css'}),
     new CopyWebpackPlugin({
         patterns: [
             {from: 'node_modules/strophe.js/src/shared-connection-worker.js', to: 'shared-connection-worker.js'},
@@ -30,12 +31,15 @@ const plugins = [
 
 module.exports = merge(common, {
     plugins,
+    entry: {
+        "converse": path.resolve(__dirname, "../src/entry.js"),
+        "converse.min": path.resolve(__dirname, "../src/entry.js"),
+    },
     output: {
         publicPath: ASSET_PATH,
-        filename: 'converse.min.js',
+        filename: "[name].js",
     },
     mode: "production",
-    devtool: "source-map",
     module: {
         rules: [{
             test: /\.scss$/,

webpack/webpack.common.js

@@ -1,4 +1,5 @@
 /* global __dirname, module, process */
+const TerserPlugin = require("terser-webpack-plugin");
 const path = require('path');
 
 let bootstrap_ignore_modules = ['carousel', 'scrollspy', 'tooltip', 'toast'];
@@ -14,7 +15,15 @@ module.exports = {
         path: path.resolve(__dirname, '../dist'), // Output path for generated bundles
         chunkFilename: '[name].js'
     },
-    entry: path.resolve(__dirname, '../src/entry.js'),
+    devtool: "source-map",
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                include: /\.min\.js$/
+            })
+        ],
+    },
     externals: [{
         "window": "window"
     }],

webpack/webpack.dev.js

@@ -1,17 +0,0 @@
-/* global module */
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const prod = require("./webpack.prod.js");
-const { merge } = require("webpack-merge");
-
-module.exports = merge(prod, {
-    mode: "production",
-    output: {
-        filename: 'converse.js',
-    },
-    optimization: {
-        minimize: false,
-    },
-    plugins: [
-        new MiniCssExtractPlugin({filename: '../dist/converse.css'}),
-    ],
-});

webpack/webpack.headless.dev.js

@@ -1,17 +0,0 @@
-/* global __dirname, module */
-const common = require("./webpack.common.js");
-const path = require('path');
-const { merge } = require("webpack-merge");
-
-module.exports = merge(common, {
-    mode: "development",
-    entry: "@converse/headless/headless.js",
-    output: {
-        path: path.resolve(__dirname, '../src/headless/dist'), // Output path for generated bundles
-        filename: 'converse-headless.js',
-    },
-    optimization: {
-        minimize: false,
-    },
-});
-

webpack/webpack.headless.js

@@ -4,13 +4,15 @@ const path = require('path');
 const { merge } = require("webpack-merge");
 
 module.exports = merge(common, {
-    entry: "@converse/headless/headless.js",
+    entry: {
+        "converse-headless": "@converse/headless/headless.js",
+        "converse-headless.min": "@converse/headless/headless.js",
+    },
     output: {
         path: path.resolve(__dirname, '../src/headless/dist'), // Output path for generated bundles
-        filename: 'converse-headless.min.js',
+        filename: "[name].js",
         chunkFilename: '[name].js'
     },
     mode: "production",
-    devtool: "source-map",
 });
 

webpack/webpack.nodeps.js

@@ -6,39 +6,14 @@ const { merge}  = require("webpack-merge");
 
 module.exports = merge(common, {
     mode: "production",
-    output: {
-        filename: 'converse-no-dependencies.js'
-    },
-    optimization: {
-        minimizer: []
+    entry: {
+        "converse-no-dependencies": path.resolve(__dirname, "../src/entry.js"),
     },
     plugins: [
         new MiniCssExtractPlugin({filename: 'tmp.css'})
     ],
     module: {
         rules: [
-        {
-            test: /\.js$/,
-            include: /src/,
-            use: {
-                loader: 'babel-loader',
-                options: {
-                    presets: [
-                        ["@babel/preset-env", {
-                            "targets": {
-                                "browsers": ["ie 11"]
-                            }
-                        }]
-                    ],
-                    plugins: [
-                        '@babel/plugin-proposal-class-properties',
-                        '@babel/plugin-proposal-nullish-coalescing-operator',
-                        '@babel/plugin-proposal-optional-chaining',
-                        '@babel/plugin-syntax-dynamic-import'
-                    ]
-                }
-            }
-        },
         {
             test: /\.scss$/,
             use: [