Update webpack config

- hot reloading
- split config into dev and prod

Makefile

@@ -122,7 +122,7 @@ dev: stamp-npm
 ## Builds
 
 .PHONY: css
-css: sass/*.scss dist/converse.css dist/converse.min.css dist/website.css dist/website.min.css
+css: sass/*.scss dist/website.css dist/website.min.css
 
 dist/website.css:: stamp-npm sass
 	$(SASS) --source-map true --include-path $(BOURBON) --include-path $(BOOTSTRAP) sass/website.scss $@
@@ -130,27 +130,9 @@ dist/website.css:: stamp-npm sass
 dist/website.min.css:: stamp-npm dist/website.css
 	$(CLEANCSS) dist/website.css > $@
 
-dist/converse.css:: stamp-npm webpack.config.js sass
-	npm run converse.css
-
-dist/converse.min.css:: stamp-npm dist/converse.css
-	npm run converse.min.css
-
-.PHONY: watchcss
-watchcss: stamp-npm
-	$(NPX)  webpack --type=css --mode=development --watch
-
-.PHONY: watchjs
-watchjs: stamp-npm src/headless/dist/converse-headless.js
-	$(NPX)  webpack --mode=development  --watch
-
-.PHONY: watchjsheadless
-watchjsheadless: stamp-npm
-	$(NPX)  webpack --mode=development  --watch --type=headless
-
 .PHONY: watch
 watch: stamp-npm
-	make -j 3 watchcss  watchjsheadless watchjs
+	npm start
 
 .PHONY: logo
 logo: logo/conversejs-transparent16.png \

index.html

@@ -18,7 +18,7 @@
     <!-- *********************************************************************** -->
 
     <![if gte IE 11]>
-        <link type="text/css" rel="stylesheet" media="screen" href="/dist/converse.min.css" />
+        <link type="text/css" rel="stylesheet" media="screen" href="https://cdn.conversejs.org/5.0.1/dist/converse.min.css" />
         <script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
         <script src="https://cdn.conversejs.org/5.0.1/dist/converse.min.js"></script>
     <![endif]>

package.json

@@ -15,14 +15,9 @@
     "src/"
   ],
   "scripts": {
-    "converse.css": "webpack --type=css --mode=development && rm -r tmp",
-    "converse.min.css": "npm run converse.css && cleancss --skip-rebase dist/converse.css > dist/converse.min.css",
-    "converse.js": "webpack --mode=development",
-    "converse.min.js": "npm run converse.js && webpack --mode=production",
-    "converse-headless.js": "webpack --mode=development --type=headless",
-    "converse-headless.min.js": "npm run converse-headless.js && webpack --mode=production --type=headless",
+    "start": "webpack-dev-server --config webpack.dev.js",
     "clean": "rm -rf node_modules stamp-npm dist *.zip",
-    "build": "npm run converse.min.css && npm run converse-headless.min.js && npm run converse.min.js",
+    "build": "webpack --config webpack.prod.js",
     "lerna": "lerna bootstrap --hoist --ignore-scripts",
     "prepare": "npm run lerna && npm run build"
   },
@@ -66,6 +61,7 @@
     "bootstrap.native-loader": "2.0.0",
     "bourbon": "^4.3.2",
     "clean-css-cli": "^4.3.0",
+    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.0.0",
     "dayjs": "^1.8.15",
     "eslint": "^6.0.1",
@@ -74,6 +70,7 @@
     "fast-text-encoding": "^1.0.0",
     "file-loader": "^4.0.0",
     "formdata-polyfill": "^3.0.18",
+    "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
     "imports-loader": "^0.8.0",
     "install": "^0.9.5",
@@ -99,6 +96,8 @@
     "urijs": "^1.19.1",
     "webpack": "^4.35.3",
     "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "^3.8.0",
+    "webpack-merge": "^4.2.1",
     "xss": "^1.0.6"
   },
   "dependencies": {}

src/converse.js

@@ -25,6 +25,8 @@ import "converse-singleton";
 import "converse-uniview";
 /* END: Removable components */
 
+import "../sass/converse.scss";
+
 import converse from "@converse/headless/converse-core";
 
 const WHITELISTED_PLUGINS = [

webpack.config.js → webpack.common.js

@@ -1,23 +1,19 @@
-/*global path, __dirname, module, process */
-'use strict'
+const HTMLWebpackPlugin = require('html-webpack-plugin');
 const minimist = require('minimist');
 const path = require('path');
 const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const config = {
     entry: path.resolve(__dirname, 'src/converse.js'),
     externals: [{
         "window": "window"
     }],
-    output: {
-        path: path.resolve(__dirname, 'dist'), // Output path for generated bundles
-        publicPath: '/dist/', // URL base path for all assets
-        filename: 'converse.js',
-        chunkFilename: '[name].js'
-    },
-    devtool: 'source-map',
-    plugins: [new MiniCssExtractPlugin({filename: '../dist/converse.css'})],
+    plugins: [
+        new HTMLWebpackPlugin({
+            title: 'Production',
+            template: 'webpack.html'
+        })
+    ],
     module: {
         rules: [
         {
@@ -29,7 +25,7 @@ const config = {
             use: "exports-loader?filterXSS,filterCSS"
         },
         {
-            test: /templates\/.*\.(html|svg)$/,
+            test: /\.(html|svg)$/,
             exclude: /node_modules/,
             use: [{
                 loader: 'lodash-template-webpack-loader',
@@ -74,7 +70,7 @@ const config = {
             test: /\.scss$/,
             use: [
                 'style-loader',
-                MiniCssExtractPlugin.loader, {
+                {
                     loader: 'css-loader',
                     options: {
                         sourceMap: true
@@ -82,12 +78,13 @@ const config = {
                 }, {
                     loader: 'sass-loader',
                     options: {
-                    includePaths: [
-                        path.resolve(__dirname, 'node_modules/')
-                    ],
-                    sourceMap: true
+                        includePaths: [
+                            path.resolve(__dirname, 'node_modules/'),
+                        ],
+                        sourceMap: true
+                    }
                 }
-            }]
+            ]
         }, {
             test: /\.js$/,
             exclude: /(node_modules|spec|mockup)/,
@@ -176,15 +173,6 @@ function parameterize () {
         }];
     }
 
-    if (type === 'css') {
-        console.log("Building only CSS");
-        config.entry = path.resolve(__dirname, 'sass/converse.scss');
-        config.output = {
-            path: path.resolve(__dirname, 'tmp'),
-            filename: 'css-builder.js'
-        }
-    }
-
     if (mode === 'production') {
         console.log("Making a production build");
         const fn = config.output.filename;

webpack.dev.js

@@ -0,0 +1,10 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        contentBase: "./dist"
+    }
+});

webpack.html

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Converse.js</title>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Converse.js: A free chat client for your website" />
+    <link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
+</head>
+<body class="reset"></body>
+<script>
+    converse.plugins.add('converse-debug', {
+        initialize () {
+            const { _converse } = this;
+            window._converse = _converse;
+        }
+    });
+    converse.initialize({
+        auto_register_muc_nickname: true,
+        enable_smacks: true,
+        auto_away: 300,
+        i18n: 'af',
+        view_mode: 'fullscreen',
+        muc_respect_autojoin: true,
+        bosh_service_url: 'http://chat.example.org:5380/http-bind/',
+        websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
+        whitelisted_plugins: ['converse-debug'],
+        muc_domain: 'conference.chat.example.org',
+        message_archiving: 'always',
+        debug: true,
+        jid: 'klaus.dresner@chat.example.org',
+        password: 'secret',
+        auto_login: true
+    });
+</script>
+</html>

webpack.prod.js

@@ -0,0 +1,15 @@
+const common = require("./webpack.common.js");
+const merge = require("webpack-merge");
+const path = require('path');
+
+module.exports = merge(common, {
+    output: {
+        path: path.resolve(__dirname, 'dist'), // Output path for generated bundles
+        publicPath: '/dist/', // URL base path for all assets
+        filename: 'converse.js',
+        chunkFilename: '[name].js'
+    },
+    mode: "production",
+    devtool: "source-map",
+});
+