Feature/webpack5 (#146)

* WIP: fix deprecation warning on code splitting.

* WIP: Webpack5 local and production build successful (without poloader currently)

* Update @atomic-reactor/webpack-po-loader for webpack 5. Latest compression-webpack-plugin.

Author: jdillick

.core/gulp.tasks.js

@@ -384,22 +384,45 @@ const reactium = (gulp, config, webpackConfig) => {
         if (!isDev || process.env.MANUAL_DEV_BUILD === 'true') {
             webpack(webpackConfig, (err, stats) => {
                 if (err) {
-                    console.log(err());
+                    console.error(err.stack || err);
+                    if (err.details) {
+                        console.error(err.details);
+                    }
+
                     done();
                     return;
                 }
 
-                let result = stats.toJson();
-
-                if (result.errors.length > 0) {
-                    result.errors.forEach(error => {
-                        console.log(error);
-                    });
-
+                const info = stats.toJson();
+                if (stats.hasErrors()) {
+                    console.error(info.errors);
                     done();
                     return;
                 }
 
+                if (stats.hasWarnings()) {
+                    if (process.env.DEBUG === 'on') console.warn(info.warnings);
+                }
+
+                const mainEntryAssets = _.pluck(
+                    info.namedChunkGroups.main.assets,
+                    'name',
+                );
+                ReactiumGulp.Hook.runSync(
+                    'main-webpack-assets',
+                    mainEntryAssets,
+                    info,
+                    stats,
+                );
+                const serverAppPath = path.resolve(rootPath, 'src/app/server');
+
+                fs.ensureDirSync(serverAppPath);
+                fs.writeFileSync(
+                    path.resolve(serverAppPath, 'webpack-manifest.json'),
+                    JSON.stringify(mainEntryAssets),
+                    'utf-8',
+                );
+
                 done();
             });
         } else {

.core/index.js

@@ -233,7 +233,6 @@ const registeredDevMiddleware = () => {
             name: 'webpack',
             use: wpMiddlware(compiler, {
                 serverSideRender: true,
-                path: '/',
                 publicPath,
             }),
             order: Enums.priority.high,

.core/sdk/named-exports/index.js

@@ -2,7 +2,7 @@ export * from './roles';
 export * from './capability';
 export * from './setting';
 export * from './window';
-export * from './i18n';
+// export * from './i18n';
 export * from './routing';
 export * from './hookable-component';
 export * from './app-context';

.core/server/renderer/index.js

@@ -74,43 +74,46 @@ ReactiumBoot.Hook.registerSync(
     (req, AppScripts, res) => {
         // Webpack assets
         if (process.env.NODE_ENV === 'development') {
-            const assetsByChunkName = res.locals.webpackStats.toJson()
-                .assetsByChunkName;
-
-            Object.values(assetsByChunkName).forEach(chunk => {
-                _.flatten([
-                    normalizeAssets(chunk)
-                        .filter(path => path.endsWith('.js'))
-                        .filter(path => /main\.js$/.test(path)),
-                ]).forEach(path =>
+            const { stats: context } = res.locals.webpack.devMiddleware;
+            const stats = context.toJson();
+            _.pluck(stats.namedChunkGroups.main.assets, 'name').forEach(
+                path => {
                     AppScripts.register(path, {
                         path: `/${path}`,
                         order: ReactiumBoot.Enums.priority.highest,
                         footer: true,
-                    }),
-                );
-            });
+                    });
+                },
+            );
 
             return;
         }
 
-        const scriptPathBase =
-            process.env.PUBLIC_DIRECTORY || `${process.cwd()}/public`;
+        try {
+            const webpackAssets = JSON.parse(
+                fs.readFileSync(
+                    path.resolve(
+                        rootPath,
+                        'src/app/server/webpack-manifest.json',
+                    ),
+                ),
+            );
 
-        globby
-            .sync(
-                path
-                    .resolve(scriptPathBase, 'assets', 'js', '*main.js')
-                    .replace(/\\/g, '/'),
-            )
-            .map(script => `/assets/js/${path.parse(script).base}`)
-            .forEach(path =>
-                AppScripts.register(path, {
-                    path,
+            ReactiumBoot.Hook.runSync('webpack-server-assets', webpackAssets);
+            webpackAssets.forEach(asset =>
+                AppScripts.register(asset, {
+                    path: `/assets/js/${asset}`,
                     order: ReactiumBoot.Enums.priority.highest,
                     footer: true,
                 }),
             );
+        } catch (error) {
+            console.error(
+                'build/src/app/server/webpack-manifest.json not found or invalid JSON',
+                error,
+            );
+            process.exit(1);
+        }
     },
     ReactiumBoot.Enums.priority.highest,
     'SERVER-APP-SCRIPTS-CORE',

.core/webpack.config.js

@@ -5,7 +5,6 @@ const _ = require('underscore');
 const path = require('path');
 const globby = require('./globby-patch');
 const webpack = require('webpack');
-const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const env = process.env.NODE_ENV || 'development';
 const rootPath = path.resolve(__dirname, '..');
@@ -49,8 +48,11 @@ module.exports = config => {
         publicPath: '/assets/js/',
         path: path.resolve(__dirname, dest),
         filename,
+        asyncChunks: true,
     };
-    sdk.devtool = env === 'development' ? 'source-map' : '';
+    if (env === 'development') {
+        sdk.devtool = 'source-map';
+    }
 
     sdk.setCodeSplittingOptimize(env);
     if (process.env.DISABLE_CODE_SPLITTING === 'true') {
@@ -82,13 +84,6 @@ module.exports = config => {
         to: path.resolve('./src/reactium-translations'),
     });
 
-    sdk.addPlugin(
-        'suppress-critical-dep-warning',
-        new FilterWarningsPlugin({
-            exclude: /Critical dependency: the request of a dependency is an expression/i,
-        }),
-    );
-
     if (env === 'production') {
         sdk.addPlugin('asset-compression', new CompressionPlugin());
     }

.core/webpack.sdk.js

@@ -8,31 +8,6 @@ const path = require('path');
 
 global.ReactiumWebpack = ReactiumWebpack;
 
-const matchChunk = (test, debug) => module => {
-    const chunkNames = [];
-    for (const chunk of module.chunksIterable) {
-        chunkNames.push(chunk.name);
-    }
-
-    const names = _.compact(
-        _.flatten([
-            module.nameForCondition && module.nameForCondition(),
-            chunkNames,
-        ]),
-    );
-
-    const match = !!names.find(name => test.test(name));
-    if (debug && match) {
-        console.log({
-            test: test.toString(),
-            name: module.nameForCondition && module.nameForCondition(),
-            chunkNames,
-        });
-    }
-
-    return match;
-};
-
 let artifacts = {};
 class WebpackReactiumWebpack {
     constructor(name, ddd, context) {
@@ -285,30 +260,11 @@ class WebpackReactiumWebpack {
         return this.plugins.list.map(({ id, plugin }) => plugin);
     }
 
-    matchChunk(test, debug) {
+    matchChunk(test) {
         return module => {
-            const chunkNames = [];
-            for (const chunk of module.chunksIterable) {
-                chunkNames.push(chunk.name);
-            }
-
-            const names = _.compact(
-                _.flatten([
-                    module.nameForCondition && module.nameForCondition(),
-                    chunkNames,
-                ]),
-            );
-
-            const match = !!names.find(name => test.test(name));
-            if (debug && match) {
-                console.log({
-                    test: test.toString(),
-                    name: module.nameForCondition && module.nameForCondition(),
-                    chunkNames,
-                });
-            }
-
-            return match;
+            const moduleName =
+                module.nameForCondition && module.nameForCondition();
+            return test.test(moduleName);
         };
     }
 
@@ -355,6 +311,7 @@ class WebpackReactiumWebpack {
     setCodeSplittingOptimize(env) {
         this.optimizationValue = {
             minimize: Boolean(env !== 'development'),
+            chunkIds: 'named',
             splitChunks: {
                 chunks: 'all',
                 cacheGroups: {
@@ -414,7 +371,6 @@ class WebpackReactiumWebpack {
             target: this.target,
             output: this.output,
             entry: this.entry,
-            devtool: this.devtool,
             optimization: this.optimization,
             externals: this.getExternals(),
             module: {
@@ -426,6 +382,8 @@ class WebpackReactiumWebpack {
             ...this.overrides,
         };
 
+        if (this.devtool) theConfig.devtool = this.devtool;
+
         if (this.resolveAliases.list.length > 0) {
             const alias = {};
             this.resolveAliases.list.forEach(({ id: from, alias: to }) => {

.gitignore

@@ -83,6 +83,7 @@ Thumbs.db
 
 # Manifest
 src/manifest.js
+src/app/server/webpack-manifest.json
 
 # Translation .mo
 *.mo