Update of code chunk splitting (AppChunk) code for Webpack@4

- Switch from `extract-css-chunks-webpack-plugin` to
`mini-css-extract-plugin`, which comes from Wepback team;
- Use Webpack stats to only load those CSS chunks that exist (the
problem is not solved at the client-side yet);
- Fix of styles hot reloading for Webpack@4 compatibility.

Fix for #22

Author: birdofpreyru

config/webpack/app-base.js

@@ -6,11 +6,12 @@
 
 const _ = require('lodash');
 const autoprefixer = require('autoprefixer');
-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const forge = require('node-forge');
 const fs = require('fs');
 const moment = require('moment');
 const path = require('path');
+const { StatsWriterPlugin } = require('webpack-stats-plugin');
 const webpack = require('webpack');
 
 /**
@@ -104,13 +105,16 @@ module.exports = function configFactory(ops) {
       publicPath: `${o.publicPath}/`,
     },
     plugins: [
-      new ExtractCssChunks({
+      new MiniCssExtractPlugin({
         chunkFilename: `[name]-${now.valueOf()}.css`,
         filename: `[name]-${now.valueOf()}.css`,
       }),
       new webpack.DefinePlugin({
         BUILD_INFO: JSON.stringify(buildInfo),
       }),
+      new StatsWriterPlugin({
+        filename: '__stats__.json',
+      }),
     ],
     resolve: {
       alias: {
@@ -158,7 +162,7 @@ module.exports = function configFactory(ops) {
         /* Loads SCSS stylesheets. */
         test: /\.scss/,
         use: [
-          ExtractCssChunks.loader, {
+          MiniCssExtractPlugin.loader, {
             loader: 'css-loader',
             options: {
               localIdentName: o.cssLocalIdent,
@@ -181,10 +185,16 @@ module.exports = function configFactory(ops) {
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           'css-loader',
         ],
       }],
     },
+    optimization: {
+      /* TODO: Dynamic chunk splitting does not play along with server-side
+       * rendering of split chunks. Probably there is a way to achieve that,
+       * but it is not a priority now. */
+      splitChunks: false,
+    },
   };
 };

config/webpack/lib-base.js

@@ -5,7 +5,7 @@
  */
 
 const autoprefixer = require('autoprefixer');
-const ExtractCssChunks = require('extract-css-chunks-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
 const webpack = require('webpack');
 
@@ -78,7 +78,7 @@ module.exports = function configFactory(ops) {
           NODE_ENV: JSON.stringify(ops.babelEnv),
         },
       }),
-      new ExtractCssChunks({
+      new MiniCssExtractPlugin({
         filename: 'style.css',
       }),
     ],
@@ -118,7 +118,7 @@ module.exports = function configFactory(ops) {
         test: /\.scss/,
         exclude: /node_modules/,
         use: [
-          ExtractCssChunks.loader, {
+          MiniCssExtractPlugin.loader, {
             loader: 'css-loader',
             options: {
               importLoaders: 3,
@@ -144,7 +144,7 @@ module.exports = function configFactory(ops) {
         * from dependencies, as we use SCSS inside our own code. */
         test: /\.css$/,
         use: [
-          ExtractCssChunks.loader,
+          MiniCssExtractPlugin.loader,
           'css-loader',
         ],
       }],

package-lock.json

@@ -64,11 +64,11 @@
     "eslint-plugin-jest": "^21.17.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.10.0",
-    "extract-css-chunks-webpack-plugin": "^3.0.6",
     "file-loader": "^1.1.11",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.2.0",
     "jsdoc-to-markdown": "^4.0.1",
+    "mini-css-extract-plugin": "^0.4.1",
     "mkpath": "^1.0.0",
     "mockdate": "^2.0.2",
     "node-sass": "^4.9.0",
@@ -88,7 +88,8 @@
     "webpack-cli": "^3.0.8",
     "webpack-dev-middleware": "^3.1.3",
     "webpack-hot-middleware": "^2.22.2",
-    "webpack-merge": "^4.1.3"
+    "webpack-merge": "^4.1.3",
+    "webpack-stats-plugin": "^0.2.1"
   },
   "engines": {
     "node": "~8.11.2",

package.json

@@ -57,17 +57,13 @@ export default async function Launch({
       () => render(getApplication(), store));
 
     /* HMR of CSS code each time webpack hot middleware updates the code. */
-    /* eslint-disable no-underscore-dangle */
-    const hotReporter = window.__webpack_hot_middleware_reporter__;
-    /* eslint-enable no-underscore-dangle */
-    const hotSuccess = hotReporter.success;
-    hotReporter.success = () => {
+    moduleHot.addStatusHandler((status) => {
+      if (status !== 'ready') return;
       const stamp = shortId();
       const links = document.querySelectorAll('link[rel=stylesheet][id="tru-style"]');
       for (let i = 0; i < links.length; i += 1) {
         links[i].href = `${links[i].href.match(/[^?]*/)}?v=${stamp}`;
       }
-      hotSuccess();
-    };
+    });
   }
 }

src/client/index.jsx

@@ -25,13 +25,31 @@ const sanitizedConfig = _.omit(config, 'SECRET');
  * At the moment, that file contains build timestamp and a random 32-bit key,
  * suitable for cryptographical use.
  * @param {String} context Webpack context path used during the build.
- * @return {Promise} Resolves to the build-time information.
+ * @return {Object} Resolves to the build-time information.
  */
 function getBuildInfo(context) {
   const url = path.resolve(context, '.build-info');
   return JSON.parse(fs.readFileSync(url));
 }
 
+/**
+ * Attempts to read from the disk Webpack stats generated during the build.
+ * It will not work for development builds, where these stats should be captured
+ * via compilator callback.
+ * @param {String} buildDir
+ * @return {Object} Resolves to the stats, or null, if cannot be read.
+ */
+function getWebpackStats(buildDir) {
+  const url = path.resolve(buildDir, '__stats__.json');
+  let res;
+  try {
+    res = JSON.parse(fs.readFileSync(url));
+  } catch (err) {
+    res = null;
+  }
+  return res;
+}
+
 /**
  * Prepares a new Cipher for data encryption.
  * @param {String} key Encryption key (32-bit random key is expected, see
@@ -65,6 +83,8 @@ export default function factory(webpackConfig, options) {
 
   global.TRU_BUILD_INFO = buildInfo;
 
+  const WEBPACK_STATS = getWebpackStats(webpackConfig.output.path);
+
   const ops = _.defaults(_.clone(options), {
     beforeRender: () => Promise.resolve({}),
   });
@@ -139,12 +159,26 @@ export default function factory(webpackConfig, options) {
       /* It is supposed to end with '/' symbol as path separator. */
       const { publicPath } = webpackConfig.output;
 
+      let assetsByChunkName;
+      const { webpackStats } = res.locals;
+      if (webpackStats) {
+        ({ assetsByChunkName } = webpackStats.toJson());
+      } else ({ assetsByChunkName } = WEBPACK_STATS);
+
       const timestamp = moment(buildInfo.timestamp).valueOf();
 
       if (context.status) res.status(context.status);
-      const styles = context.chunks.map(chunk => (
-        `<link data-chunk="${chunk}" id="tru-style" href="${publicPath}${chunk}-${timestamp}.css" rel="stylesheet" />`
-      )).join('');
+      const styles = [];
+      context.chunks.forEach((chunk) => {
+        let assets = assetsByChunkName[chunk];
+        if (!_.isArray(assets)) assets = [assets];
+        assets = assets.filter(asset => asset.endsWith('.css'));
+        assets.forEach((asset) => {
+          styles.push((
+            `<link href="${publicPath}${asset}" id="tru-style" rel="stylesheet" />`
+          ));
+        });
+      });
 
       res.send((
         `<!DOCTYPE html>
@@ -157,7 +191,7 @@ export default function factory(webpackConfig, options) {
               id="tru-style"
               rel="stylesheet"
             />
-            ${styles}
+            ${styles.join('')}
             <link rel="shortcut icon" href="/favicon.ico" />
             <meta charset="utf-8" />
             <meta

src/server/renderer.jsx

@@ -42,7 +42,7 @@ export default class SplitRoute extends React.Component {
      * of loaded stylesheets, which is how our CSS should be written. */
     const { chunkName } = this.props;
     const link = document.querySelector(`link[data-chunk="${chunkName}"]`);
-    link.setAttribute('data-chunk-unused', unusedCssStamp += 1);
+    if (link) link.setAttribute('data-chunk-unused', unusedCssStamp += 1);
 
     /* Reset to the initial state. */
     this.setState({ component: null });
@@ -100,14 +100,14 @@ export default class SplitRoute extends React.Component {
             /* eslint-disable react/prop-types */
             const { splits } = props.staticContext;
             /* eslint-enable react/prop-types */
-            if (splits[`${chunkName}`]) throw new Error('SplitRoute: IDs clash!');
-            else splits[`${chunkName}`] = html;
+            if (splits[chunkName]) throw new Error('SplitRoute: IDs clash!');
+            else splits[chunkName] = html;
 
             /* 3. The stylesheet links are injected via links elements in the
              *    header of the document, to have a better control over styles
              *    (re-)loading, independent of ReactJS mechanics of
              *    the document updates. */
-            props.staticContext.chunks.push(`${chunkName}`);
+            props.staticContext.chunks.push(chunkName);
 
             /* 4. We also render the mounted component, or the placeholder,
              *    into the document, using dangerouslySetInnerHTML to inject
@@ -121,14 +121,14 @@ export default class SplitRoute extends React.Component {
             /* eslint-enable react/no-danger */
           } else {
             /* Client side rendering */
-            if (window.SPLITS[`${chunkName}`]) {
+            if (window.SPLITS[chunkName]) {
               /* If the page has been pre-rendered at the server-side, we render
                * exactly the same until the splitted code is loaded. */
               /* eslint-disable react/no-danger */
               res = (
                 <div
                   dangerouslySetInnerHTML={{
-                    __html: window.SPLITS[`${chunkName}`],
+                    __html: window.SPLITS[chunkName],
                   }}
                 />
               );
@@ -138,7 +138,7 @@ export default class SplitRoute extends React.Component {
                * because if the vistor navigates around the app and comes back
                * to this route, we want to re-render the page from scratch in
                * that case (because the state of app has changed). */
-              delete window.SPLITS[`${chunkName}`];
+              delete window.SPLITS[chunkName];
             } else if (renderPlaceholder) {
               /* If the page has not been pre-rendered, the best we can do prior
                * the loading of split code, is to render the placeholder, if
@@ -169,7 +169,7 @@ export default class SplitRoute extends React.Component {
               link.removeAttribute('data-chunk-unused');
             } else {
               link = document.createElement('link');
-              link.setAttribute('data-chunk', `${chunkName}`);
+              link.setAttribute('data-chunk', chunkName);
               link.setAttribute('href', `${PUBLIC_PATH}/${chunkName}-${timestamp}.css`);
               link.setAttribute('id', 'tru-style');
               link.setAttribute('rel', 'stylesheet');
@@ -229,7 +229,7 @@ export default class SplitRoute extends React.Component {
                   component: () => (
                     <div>
                       <ContentWrapper
-                        chunkName={`${chunkName}`}
+                        chunkName={chunkName}
                         content={component2}
                         parent={this}
                       />
@@ -249,7 +249,6 @@ export default class SplitRoute extends React.Component {
 }
 
 SplitRoute.defaultProps = {
-  // cacheCss: false,
   exact: false,
   location: null,
   path: null,
@@ -259,7 +258,6 @@ SplitRoute.defaultProps = {
 };
 
 SplitRoute.propTypes = {
-  // cacheCss: PT.bool,
   chunkName: PT.string.isRequired,
   exact: PT.bool,
   location: PT.shape(),