Update webpack config to re-add the old `make watch`

Makefile

@@ -28,7 +28,7 @@ ALLSPHINXOPTS	= -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) ./doc
 VERSION_FORMAT	= [0-9]+\.[0-9]+\.[0-9]+
 
 .PHONY: all
-all: dev dist
+all: stamp-npm dist
 
 .PHONY: help
 help:
@@ -39,7 +39,7 @@ help:
 	@echo " clean		Remove all NPM packages."
 	@echo " check		Run all tests."
 	@echo " css			Generate CSS from the Sass files."
-	@echo " dev			Set up the development environment. To force a fresh start, run 'make clean' first."
+	@echo " dev			Set up the development environment and start the webpack dev server. To force a fresh start, run 'make clean' first."
 	@echo " html		Make standalone HTML files of the documentation."
 	@echo " po			Generate gettext PO files for each i18n language."
 	@echo " pot			Generate a gettext POT file to be used for translations."
@@ -120,6 +120,7 @@ clean:
 
 .PHONY: dev
 dev: stamp-npm
+	npm dev
 
 ########################################################################
 ## Builds
@@ -135,7 +136,7 @@ dist/website.min.css:: stamp-npm dist/website.css
 
 .PHONY: watch
 watch: stamp-npm
-	npm start
+	npm run watch
 
 .PHONY: logo
 logo: logo/conversejs-transparent16.png \

package.json

@@ -15,12 +15,13 @@
     "src/"
   ],
   "scripts": {
-    "start": "webpack-dev-server --config webpack.dev.js",
+    "dev": "webpack-dev-server --config webpack.serve.js",
     "clean": "rm -rf node_modules stamp-npm dist *.zip",
     "converse-headless.js": "webpack --mode=development --type=headless",
     "converse-headless.min.js": "npm run converse-headless.js && webpack --mode=production --type=headless",
     "nodeps": "webpack --config webpack.nodeps.js",
     "build": "webpack --config webpack.prod.js",
+    "watch": "webpack --watch --config webpack.dev.js",
     "lerna": "lerna bootstrap --hoist --ignore-scripts",
     "prepare": "npm run lerna && npm run build"
   },

webpack.common.js

@@ -9,6 +9,9 @@ const config = {
     externals: [{
         "window": "window"
     }],
+    watchOptions: {
+        ignored: [/dist/, /spec/, /.*\~/]
+    },
     module: {
         rules: [
         {

webpack.dev.js

 /* global module */
 const merge = require("webpack-merge");
-const common = require("./webpack.common.js");
-const HTMLWebpackPlugin = require('html-webpack-plugin');
+const prod = require("./webpack.prod.js");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-module.exports = merge(common, {
-    mode: "development",
-    devtool: "inline-source-map",
-    devServer: {
-        contentBase: "./dist"
+module.exports = merge(prod, {
+    output: {
+        filename: 'converse.js',
     },
-    plugins: [
-        new HTMLWebpackPlugin({
-            title: 'Production',
-            template: 'webpack.html'
-        })
-    ],
+    optimization: {
+        minimize: false,
+    },
+    devtool: 'source-map',
+    plugins: [new MiniCssExtractPlugin({filename: '../dist/converse.css'})]
 });

webpack.prod.js

@@ -8,11 +8,11 @@ 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',
+        filename: 'converse.min.js',
         chunkFilename: '[name].js'
     },
     plugins: [
-        new MiniCssExtractPlugin({filename: '../dist/converse.css'})
+        new MiniCssExtractPlugin({filename: '../dist/converse.min.css'})
     ],
     mode: "production",
     devtool: "source-map",

webpack.serve.js

+/* global module */
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const HTMLWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = merge(common, {
+    mode: "development",
+    devtool: "inline-source-map",
+    devServer: {
+        contentBase: "./dist"
+    },
+    plugins: [
+        new HTMLWebpackPlugin({
+            title: 'Production',
+            template: 'webpack.html'
+        })
+    ],
+});