Makefile: add recipe for setting the CDN url as the `publicPath`

Makefile

@@ -38,7 +38,6 @@ help:
 	@echo " build		Create minified builds of converse.js and all its dependencies."
 	@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 and build unminified resources. To force a fresh start, run 'make clean' first."
 	@echo " devserver	Set up the development environment and start the webpack dev server."
 	@echo " html		Make standalone HTML files of the documentation."
@@ -131,9 +130,6 @@ devserver: stamp-npm
 ########################################################################
 ## Builds
 
-.PHONY: css
-css: sass/*.scss dist/website.css dist/website.min.css
-
 dist/converse.js:: stamp-npm dev
 
 dist/converse.css:: stamp-npm dev
@@ -173,15 +169,19 @@ BUILDS = src/headless/dist/converse-headless.min.js
 @converse/headless: src/headless
 
 src/headless/dist/converse-headless.min.js: src webpack.common.js stamp-npm @converse/headless
-	npm run converse-headless.min.js
+	npm run headless
 
 
 .PHONY: dist
 dist:: build
 
 .PHONY: build
-build:: stamp-npm css
-	npm run build
+build:: stamp-npm
+	npm run dev && npm run build
+
+.PHONY: cdn
+cdn:: stamp-npm
+	npm run cdn
 
 ########################################################################
 ## Tests

package.json

@@ -17,8 +17,9 @@
   "scripts": {
     "serve": "webpack-dev-server --config webpack.serve.js",
     "clean": "rm -rf node_modules stamp-npm dist *.zip",
-    "converse-headless.min.js": "webpack --config webpack.headless.js",
+    "headless": "webpack --config webpack.headless.js",
     "nodeps": "webpack --config webpack.nodeps.js",
+    "cdn": "ASSET_PATH=https://cdn.conversejs.org/dist npm run dev && ASSET_PATH=https://cdn.conversejs.org/dist npm run build",
     "build": "webpack --config webpack.prod.js",
     "dev": "webpack --config webpack.dev.js",
     "watch": "webpack --watch --config webpack.dev.js",

webpack.dev.js

@@ -1,16 +1,24 @@
-/* global module */
+/* global module, process */
 const merge = require("webpack-merge");
 const prod = require("./webpack.prod.js");
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const ASSET_PATH = process.env.ASSET_PATH || '/dist/'; // eslint-disable-line no-process-env
+
 module.exports = merge(prod, {
     output: {
-        publicPath: '/dist/', // URL base path for all assets
+        publicPath: ASSET_PATH,
         filename: 'converse.js',
     },
     optimization: {
         minimize: false,
     },
     devtool: 'source-map',
-    plugins: [new MiniCssExtractPlugin({filename: 'converse.css'})]
+    plugins: [
+        new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
+        new webpack.DefinePlugin({ // This makes it possible for us to safely use env vars on our code
+            'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
+        })
+    ],
 });

webpack.prod.js

@@ -1,16 +1,22 @@
-/* global __dirname, module */
+/* global __dirname, module, process */
 const common = require("./webpack.common.js");
 const merge = require("webpack-merge");
 const path = require('path');
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
+const ASSET_PATH = process.env.ASSET_PATH || '/dist/'; // eslint-disable-line no-process-env
+
 module.exports = merge(common, {
     output: {
-        publicPath: '/dist/', // URL base path for all assets
+        publicPath: ASSET_PATH,
         filename: 'converse.min.js',
     },
     plugins: [
-        new MiniCssExtractPlugin({filename: '../dist/converse.min.css'})
+        new MiniCssExtractPlugin({filename: '../dist/converse.min.css'}),
+        new webpack.DefinePlugin({ // This makes it possible for us to safely use env vars on our code
+            'process.env.ASSET_PATH': JSON.stringify(ASSET_PATH)
+        })
     ],
     mode: "production",
     devtool: "source-map",