nullstack · Mortaro · Jan 30, 2022 · Dec 21, 2021 · Dec 28, 2021 · Dec 28, 2021
diff --git a/builders/spa.js b/builders/spa.js
@@ -1,4 +1,5 @@
-module.exports = async function spa(folder = 'spa') {
+module.exports = async function spa({ output, cache }) {
+  const folder = output || 'spa';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'spa';
 
   const dir = process.cwd();
@@ -32,5 +33,10 @@ module.exports = async function spa(folder = 'spa') {
   console.log()
 
   console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${application.project.name} is ready at ${folder}\n`);
-  process.exit()
+
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/builders/ssg.js b/builders/ssg.js
@@ -1,4 +1,5 @@
-module.exports = async function ssg(folder = 'ssg') {
+module.exports = async function ssg({ output, cache }) {
+  const folder = output || 'ssg';
   process.env.NULLSTACK_ENVIRONMENT_MODE = 'ssg';
 
   const dir = process.cwd();
@@ -101,5 +102,10 @@ module.exports = async function ssg(folder = 'ssg') {
   console.log()
 
   console.log('\x1b[36m%s\x1b[0m', ` ✅️ ${application.project.name} is ready at ${folder}\n`);
-  process.exit()
+
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/builders/ssr.js b/builders/ssr.js
@@ -1,8 +1,12 @@
-module.exports = async function ssr() {
+module.exports = async function ssr({ cache }) {
   const dir = process.cwd();
   const application = require(`${dir}/.production/server`).default;
 
   console.log('\x1b[36m%s\x1b[0m', `\n ✅️ ${application.project.name} is ready for production\n`);
 
-  process.exit()
+  if (cache) {
+    console.log('Storing cache...');
+  } else {
+    process.exit();
+  }
 }
diff --git a/package.json b/package.json
@@ -35,17 +35,17 @@
     "fs-extra": "^10.0.0",
     "glob": "^7.1.7",
     "ignore-loader": "^0.1.2",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "node-fetch": "3.0.0",
     "nodemon-webpack-plugin": "^4.3.1",
-    "purgecss-webpack-plugin": "^2.2.0",
+    "purgecss-webpack-plugin": "^4.1.3",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.11",
     "sass-loader": "^8.0.2",
-    "string-replace-loader": "^2.2.0",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
+    "string-replace-loader": "^3.1.0",
+    "terser-webpack-plugin": "^5.3.0",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
     "webpack-livereload-plugin": "^2.3.0",
     "ws": "^7.4.4"
   }

diff --git a/scripts/index.js b/scripts/index.js
@@ -22,7 +22,8 @@ function logCompiling(showCompiling) {
 
 function logTrace(stats, showCompiling) {
   if (stats.hasErrors()) {
-    const [file, loader, ...trace] = stats.toJson('errors-only', { colors: true }).children[0].errors[0].split('\n');
+    const { moduleName: file, message } = stats.toJson('errors-only', { colors: true }).children[0].errors[0];
+    const [loader, ...trace] = message.split('\n');
     if (loader.indexOf('/nullstack/loaders') === -1) trace.unshift(loader)
     const currentTrace = trace.join(' ');
     if (lastTrace === currentTrace) return;
@@ -55,14 +56,14 @@ function start({ input, port }) {
   compiler.watch({}, (error, stats) => logTrace(stats, true));
 }
 
-function build({ input, output, mode = 'ssr' }) {
+function build({ input, output, cache, mode = 'ssr' }) {
   const environment = 'production';
-  const compiler = getCompiler({ environment, input });
+  const compiler = getCompiler({ environment, input, cache });
   console.log(` 🚀️ Building your application in ${mode} mode...`);
   compiler.run((error, stats) => {
     logTrace(stats, false);
     if (stats.hasErrors()) process.exit(1);
-    require(`../builders/${mode}`)(output);
+    require(`../builders/${mode}`)({ output, cache });
   });
 }
 
@@ -82,6 +83,7 @@ program
   .addOption(new program.Option('-m, --mode <mode>', 'Build production bundles').choices(buildModes))
   .option('-i, --input <input>', 'Path to project that will be built')
   .option('-o, --output <output>', 'Path to build output folder')
+  .option('-c, --cache', 'Cache build results in .production folder')
   .helpOption('-h, --help', 'Learn more about this command')
   .action(build)
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -9,6 +9,18 @@ const { readdirSync } = require('fs');
 
 const buildKey = crypto.randomBytes(20).toString('hex');
 
+function cacheFactory(args, folder, name) {
+  if (args.cache || args.environment === 'development') {
+    return {
+      type: 'filesystem',
+      cacheDirectory: path.resolve(`./${folder}/.cache`),
+      name
+    };
+  } else {
+    return false;
+  }
+}
+
 const babel = {
   test: /\.js$/,
   resolve: {
@@ -88,7 +100,7 @@ function server(env, argv) {
     }
   }
   const folder = argv.environment === 'development' ? '.development' : '.production';
-  const devtool = argv.environment === 'development' ? 'cheap-inline-module-source-map' : 'none';
+  const devtool = argv.environment === 'development' ? 'inline-cheap-module-source-map' : false;
   const minimize = argv.environment !== 'development';
   const plugins = argv.environment === 'development' ? ([
     new NodemonPlugin({
@@ -113,7 +125,9 @@ function server(env, argv) {
           terserOptions: {
             //keep_classnames: true,
             keep_fnames: true
-          }
+          },
+          // workaround: disable parallel to allow caching server
+          parallel: argv.cache ? false : require('os').cpus().length - 1
         })
       ]
     },
@@ -180,14 +194,15 @@ function server(env, argv) {
       __dirname: false,
       __filename: false,
     },
-    plugins
+    plugins,
+    cache: cacheFactory(argv, folder, 'server')
   }
 }
 
 function client(env, argv) {
   const dir = argv.input || '../..';
   const folder = argv.environment === 'development' ? '.development' : '.production';
-  const devtool = argv.environment === 'development' ? 'cheap-inline-module-source-map' : 'none';
+  const devtool = argv.environment === 'development' ? 'inline-cheap-module-source-map' : false;
   const minimize = argv.environment !== 'development';
   let liveReload = {};
   if (argv.environment !== 'development') {
@@ -207,7 +222,7 @@ function client(env, argv) {
     plugins.push(new PurgecssPlugin({
       paths: glob.sync(`src/**/*`, { nodir: true }),
       content: ['./**/*.njs'],
-      whitelist: ['script', 'body', 'html', 'style'],
+      safelist: ['script', 'body', 'html', 'style'],
       defaultExtractor: content => content.match(/[\w-/:\\\.\[\]]+(?<!:)/g) || [],
     }));
   }
@@ -279,7 +294,8 @@ function client(env, argv) {
       ]
     },
     target: 'web',
-    plugins
+    plugins,
+    cache: cacheFactory(argv, folder, 'client')
   }
 }