Skip to content
Permalink
Browse files

Use Webpack's production mode by default, shipping minified JavaScript.

You can choose the way Webpack will run via the environment variable
WEBPACK_MODE, giving you a choice between deployment speed, portability and
runtime speed:

   * quick: Run Webpack in development mode and don't run Babel.  This
     means that JavaScript does not get transpiled, so you need a very
     recent browser. Minification is not done.

   * development: Run Webpack in development mode, including Babel.
     JavaScript is being transpiled, but not minified.

   * production: Run Webpack in production mode, including Babel.
     JavaScript is transpiled and minified.

The top-level Makefile uses "production" by default, and web/.f12 uses
"development" by default.  You can override this by setting the WEBPACK_MODE
environment variable if you want.

Note that the way we configure and run Webpack is quite a hack, we should
really clean this up, see e.g.  https://webpack.js.org/guides/production/.
Furthermore, we should split our JavaScript files and improve the way when
we build what: Currently we e.g. rebuild all our JavaScript stuff when some
tiny CSS file has changed. :-/

Change-Id: I08db2fefa7ba4abe1fe27815dfe5bc90db8f365f
  • Loading branch information...
svenpanne committed Sep 6, 2019
1 parent 065a8a4 commit 1835cf0a8f5f2b2b0ff62844fdc4f66ac0725eea
Showing with 8 additions and 6 deletions.
  1. +3 −2 Makefile
  2. +1 −3 web/.f12
  3. +4 −1 webpack.config.js
@@ -86,6 +86,7 @@ PNG_FILES := $(wildcard $(addsuffix /*.png,web/htdocs/images web/htdocs

RRDTOOL_VERS := $(shell egrep -h "RRDTOOL_VERS\s:=\s" omd/packages/rrdtool/rrdtool.make | sed 's/RRDTOOL_VERS\s:=\s//')

WEBPACK_MODE ?= production
THEMES := classic facelift modern-dark
THEME_CSS_FILES := $(addprefix web/htdocs/themes/,$(addsuffix /theme.css,$(THEMES)))
THEME_JSON_FILES := $(addprefix web/htdocs/themes/,$(addsuffix /theme.json,$(THEMES)))
@@ -333,10 +334,10 @@ node_modules: package.json
npm install --unsafe-perm

web/htdocs/js/%_min.js: node_modules webpack.config.js $(JAVASCRIPT_SOURCES)
ENTERPRISE=$(ENTERPRISE) MANAGED=$(MANAGED) node_modules/.bin/webpack --mode=development
WEBPACK_MODE=$(WEBPACK_MODE) ENTERPRISE=$(ENTERPRISE) MANAGED=$(MANAGED) node_modules/.bin/webpack --mode=$(WEBPACK_MODE:quick=development)

web/htdocs/themes/%/theme.css: node_modules webpack.config.js postcss.config.js web/htdocs/themes/%/theme.scss web/htdocs/themes/%/scss/*.scss
ENTERPRISE=$(ENTERPRISE) MANAGED=$(MANAGED) node_modules/.bin/webpack --mode=development
WEBPACK_MODE=$(WEBPACK_MODE) ENTERPRISE=$(ENTERPRISE) MANAGED=$(MANAGED) node_modules/.bin/webpack --mode=$(WEBPACK_MODE:quick=development)

# TODO(sp) The target below is not correct, we should not e.g. remove any stuff
# which is needed to run configure, this should live in a separate target. In
@@ -13,10 +13,8 @@
THEME_IMAGE_DIRS=$(for theme in $THEMES; do echo "web/htdocs/themes/${theme}/images"; done)
THEME_RESOURCES="${THEME_CSS_FILES} ${THEME_JSON_FILES} ${THEME_IMAGE_DIRS}"

export NO_BABEL_LOADER=1

echo "Updating compiled JS/CSS files..."
make -C .. ${JAVASCRIPT_MINI} ${THEME_CSS_FILES}
make -C .. WEBPACK_MODE=${WEBPACK_MODE:-development} ${JAVASCRIPT_MINI} ${THEME_CSS_FILES}

echo "Update site $SITE..."

@@ -91,7 +91,10 @@ module.exports = {
};


if (process.env.NO_BABEL_LOADER == undefined) {
if (process.env.WEBPACK_MODE === "quick") {
console.log("not using Babel in Webpack mode '" + process.env.WEBPACK_MODE + "', let's hope you know what your're doing...");
} else {
console.log("using Babel in Webpack mode '" + process.env.WEBPACK_MODE + "'");
let babel_loader = {
test: /\.js$/,
use: {

0 comments on commit 1835cf0

Please sign in to comment.
You can’t perform that action at this time.