change webpack config, use cache and build one language after another

with scripts/build.js
update README

README.md

@@ -252,13 +252,10 @@ Run `npm run lint:src` to check for code errors and warnings or `npm run lint --
 Please do not produce too many additional warnings.
 
 [ttag](https://github.com/ttag-org/ttag/) is used for handling translations. For server-side rendering the `Accept-Language` header gets checked and the first locale used and on-the-fly translated (`src/core/ttag.js` provides the functions for it). On the client-side a seperate bundle for every language gets provided.
-To update the language definitions in `i18n/template.pot` and `i18n/template-ssr.pot` run 
+The language definitions in `i18n/template.pot` and `i18n/template-ssr.pot` get updated when doing a dev build with
 ```
-npm run extract
+npm run build:dev
 ```
+which also only builds the default local in a development environment for debugging.
 
 You can use `npm run babel-node ./your/script.js` to execute a script with local babel.
-
-`npm run upgrade` can be use for interactively upgrading npm packages.
-
-

deployment/post-receive

@@ -50,7 +50,7 @@ do
         COMMITS=`echo "$COMMITS" | sed ':a;N;$!ba;s/\n/\\\n/g'`
         echo "---BUILDING pixelplanet---"
         cd "$BUILDDIR"
-        nice -n 19 npm run build-en
+        nice -n 19 npm run build:dev
         echo "---RESTARTING CANVAS---"
         cp -r dist/*.js "${DEVFOLDER}/"
         cp -r dist/public "${DEVFOLDER}/"

package.json

@@ -9,11 +9,10 @@
   "description": "Unlimited planet canvas for placing pixels",
   "main": "server.js",
   "scripts": {
-    "build": "npm run webpack && npm run minify-css",
-    "build-en": "npm run extract && npm run minify-css",
-    "webpack": "webpack --config ./webpack.config.web.babel.js && webpack --config ./webpack.config.client.babel.js",
+    "build": "babel-node scripts/build.js && npm run minify-css",
+    "build:dev": "npm run extract && npm run minify-css",
     "minify-css": "babel-node scripts/minifyCss.js",
-    "extract": "webpack --env extract --config ./webpack.config.web.babel.js && webpack --env extract --config ./webpack.config.client.babel.js",
+    "extract": "webpack --env extract --config ./webpack.config.server.babel.js && webpack --env extract --env development --config ./webpack.config.client.babel.js",
     "babel-node": "cd $INIT_CWD && babel-node",
     "lint": "cd $INIT_CWD && eslint --ext .jsx --ext .js",
     "lint:src": "eslint --ext .jsx --ext .js src",

scripts/build.js

@@ -0,0 +1,50 @@
+/*
+ * We got so many locals that building them all in one go can lead to out-of-memory error
+ * Lets split that here
+ */
+
+import webpack from 'webpack';
+import serverConfig from '../webpack.config.server.babel.js';
+import clientConfig, {getAllAvailableLocals} from '../webpack.config.client.babel.js';
+
+function compile(webpackConfig) {
+  return new Promise((resolve, reject) => {
+    webpack(webpackConfig).run((err, stats) => {
+      if (err) {
+        return reject(err);
+      }
+      const statsConfig = (webpackConfig.length) ? webpackConfig[0].stats : webpackConfig.stats;
+      console.log(stats.toString(statsConfig))
+      return resolve();
+    });
+  });
+}
+
+async function buildProduction() {
+  // server files
+  console.log('-----------------------------');
+  console.log(`Build server...`);
+  console.log('-----------------------------');
+  await compile(serverConfig({
+    development: false,
+    extract: false,
+  }));
+  // client files
+  const langs = getAllAvailableLocals();
+  console.log('Available locales:', langs);
+  const st = Date.now();
+  for(let i = 0; i < langs.length; i += 1) {
+    const lang = langs[i];
+    console.log(`Build client for locale ${lang}...`);
+    console.log('-----------------------------');
+    await compile(clientConfig({
+      development: false,
+      analyze: false,
+      extract: false,
+      locale: lang,
+    }));
+  }
+  console.log(`Finished building in ${(Date.now() - st) / 1000}s`);
+}
+
+buildProduction();

webpack.config.client.babel.js

@@ -45,6 +45,14 @@ export function buildWebpackClientConfig(
     ['ttag', ttag],
   ];
 
+  // cache invalidates if .po file changed
+  const buildDependencies = {
+    config: [__filename],
+  }
+  if (locale !== 'default') {
+    buildDependencies.i18n = [ttag.resolve.translations];
+  }
+
   return {
     name: 'client',
     target: 'web',
@@ -182,52 +190,56 @@ export function buildWebpackClientConfig(
       chunkModules: false,
     },
 
-    /*
-     * maybe some day in the future it might be
-     * usesable - but then remember to 
-     * wreck the cache when .po files changed
     cache: {
       type: 'filesystem',
-      cacheDirectory: path.resolve(
-        __dirname,
-        'node_modules',
-        '.cache',
-        'webpack',
-      ),
+      name: (development) ? `${locale}-dev` : locale,
+      buildDependencies,
     },
-     */
-    cache: false,
   };
 }
 
+export function getAllAvailableLocals() {
+  const langDir = path.resolve(__dirname, 'i18n');
+  const langs = fs.readdirSync(langDir)
+    .filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
+    .map((l) => l.slice(0, -3));
+  langs.push('default');
+  return langs;
+}
+
 /*
  * return array of webpack configuartions for all languages
  */
-function buildWebpackClientConfigAllLangs(development, analyze) {
-  let webpackConfigClient = [
-    buildWebpackClientConfig(development, analyze, 'default', false),
-  ];
-  /*
-   * get available translations
-   */
-  const langDir = path.resolve(__dirname, 'i18n');
-  const langs = fs.readdirSync(langDir)
-    .filter((e) => (e.endsWith('.po') && !e.startsWith('ssr')))
-    .map((l) => l.slice(0, -3));
-  webpackConfigClient = webpackConfigClient.concat(
-    langs.map((l) => buildWebpackClientConfig(development, analyze, l)),
-  );
-
+function buildWebpackClientConfigAllLangs() {
+  const langs = getAllAvailableLocals();
+  const webpackConfigClient = [];
+  for (let l = 0; l < langs.length; l += 1) {
+    const lang = langs[l];
+    const cfg = buildWebpackClientConfig(false, false, lang, false);
+    webpackConfigClient.push(cfg);
+  }
   return webpackConfigClient;
 }
 
+/*
+ * Per default get configuration of all packages
+ * If any argument is given, it will only get one
+ * ('default' aka english if locale is unset)
+ *
+ * @param development If development mode
+ * @param extract if translatable strings get in i18n templates should
+ *   get updated
+ * @param locale language get single configuration of specific locale
+ * @param analyze launch BundleAnalyzerPlugin after build
+ * @return webpack configuration
+ */
 export default ({
   development, analyze, extract, locale,
 }) => {
-  if (extract || locale) {
+  if (extract || analyze || locale || development) {
     return buildWebpackClientConfig(
       development, analyze, locale || 'default', extract,
     );
   }
-  return buildWebpackClientConfigAllLangs(development, analyze);
+  return buildWebpackClientConfigAllLangs(development);
 };

webpack.config.server.babel.js

@@ -28,7 +28,7 @@ const babelPlugins = [
   ['ttag', ttag],
 ];
 
-console.log('IGNORE GPJWP (generate-package-json-webpack-plugin) WARNINGS / ERRORS, ITS CURRENT VERSION IS A BIG BUGGY, BUT STILL WORKS');
+console.log('IGNORE GPJWP (generate-package-json-webpack-plugin) WARNINGS / ERRORS, ITS CURRENT VERSION IS A BIT BUGGY, BUT STILL WORKS');
 
 export default ({
   development, extract,