dll support

Author: grgur

.gitignore

@@ -1,3 +1,4 @@
 **/node_modules
 **/*.log
 /packages/more/.cache
+/packages/more/dll

README.md

@@ -0,0 +1,15 @@
+# Modus React Application Scaffolding
+
+Monorepo containing setup for a best-practice React application scaffolding
+
+### DLLs
+
+DLLs precompile libraries to save time for development builds and re-builds.
+
+React and React Router are included in DLLs by default. You can add other libraries by including them in package.json as an array in the `dll` property.
+
+```json
+"dll": [
+  "foo"
+]
+```

packages/more/.env.local

@@ -1,2 +1,3 @@
 SOURCE_DIR=src
 BUILD_DIR=build
+SOURCEMAPS=false

packages/more/bin/more.js

@@ -4,21 +4,22 @@
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
 process.on('unhandledRejection', err => {
-  throw err
-})
+  throw err;
+});
 
-const spawn = require('cross-spawn')
-const args = process.argv.slice(2)
+const spawn = require('cross-spawn');
+const args = process.argv.slice(2);
 
-const commands = ['build', 'start', 'pre-commit']
+const commands = ['build', 'start', 'pre-commit', 'dll'];
 
-const scriptIndex = args.findIndex(x => commands.includes(x))
+const scriptIndex = args.findIndex(x => commands.includes(x));
 
-const script = scriptIndex === -1 ? args[0] : args[scriptIndex]
-const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : []
+const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
+const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
 
 switch (script) {
   case 'pre-commit':
+  case 'dll':
   case 'build':
   case 'start': {
     const result = spawn.sync(
@@ -27,27 +28,27 @@ switch (script) {
         .concat(require.resolve('../scripts/' + script))
         .concat(args.slice(scriptIndex + 1)),
       { stdio: 'inherit' }
-    )
+    );
     if (result.signal) {
       if (result.signal === 'SIGKILL') {
         console.log(
           'The build failed because the process exited too early. ' +
             'This probably means the system ran out of memory or someone called ' +
             '`kill -9` on the process.'
-        )
+        );
       } else if (result.signal === 'SIGTERM') {
         console.log(
           'The build failed because the process exited too early. ' +
             'Someone might have called `kill` or `killall`, or the system could ' +
             'be shutting down.'
-        )
+        );
       }
-      process.exit(1)
+      process.exit(1);
     }
-    process.exit(result.status)
-    break
+    process.exit(result.status);
+    break;
   }
   default:
-    console.log('Unknown script "' + script + '".')
-    break
+    console.log('Unknown script "' + script + '".');
+    break;
 }

packages/more/scripts/dll.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const webpack = require('webpack');
+const webpackConfig = path.resolve(__dirname, '../webpack.dll.config');
+
+const defaultWebpackConfig = require(webpackConfig);
+const compiler = webpack(defaultWebpackConfig);
+compiler.run();

packages/more/scripts/pre-commit.js

@@ -1 +1 @@
-require('lint-staged')
+require('lint-staged');

packages/more/webpack.config.js

@@ -3,12 +3,17 @@ const path = require('path');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 
 const projectRoot = process.env.INIT_CWD;
 
 const sourceDir = path.join(projectRoot, process.env.SOURCE_DIR);
 const buildDir = path.join(projectRoot, process.env.BUILD_DIR);
-const shouldUseSourceMap = false;
+const dllDir = path.join(__dirname, 'dll');
+const dllManifest = require(path.join(dllDir, 'libs-manifest.json'));
+
+const shouldUseSourceMap =
+  process.env.SOURCEMAPS.toLowerCase() === 'false' || false;
 
 const { NODE_ENV = 'production' } = process.env;
 
@@ -67,13 +72,8 @@ const getStyleLoaders = (cssOptions, preProcessor) => {
       options: cssOptions,
     },
     {
-      // Options for PostCSS as we reference these options twice
-      // Adds vendor prefixing based on your specified browser support in
-      // package.json
       loader: require.resolve('postcss-loader'),
       options: {
-        // Necessary for external CSS imports to work
-        // https://github.com/facebook/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
           require('postcss-flexbugs-fixes'),
@@ -134,10 +134,11 @@ module.exports = {
     }),
 
     // import dll manifest
-    // new webpack.DllReferencePlugin({
-    //   context: path.resolve(__dirname, '.'),
-    //   manifest: dllManifest,
-    // }),
+    isDev &&
+      new webpack.DllReferencePlugin({
+        context: path.resolve(__dirname), //path.resolve(projectRoot), //path.resolve(__dirname, '.'),
+        manifest: dllManifest,
+      }),
 
     new HtmlWebpackPlugin(
       Object.assign(
@@ -165,12 +166,13 @@ module.exports = {
     ),
 
     // make DLL assets available for the app to download
-    // new AddAssetHtmlPlugin([
-    //   {
-    //     filepath: require.resolve('./dll/libs.dll.js'),
-    //     includeSourcemap: false,
-    //   },
-    // ]),
+    isDev &&
+      new AddAssetHtmlPlugin([
+        {
+          filepath: path.join(dllDir, 'libs.dll.js'),
+          includeSourcemap: false,
+        },
+      ]),
 
     isDev && new webpack.HotModuleReplacementPlugin(),
   ].filter(Boolean),

packages/more/webpack.dll.config.js

@@ -0,0 +1,43 @@
+const webpack = require('webpack');
+const path = require('path');
+
+const outputPath = path.join(__dirname, 'dll');
+const pkgJson = path.resolve(process.env.INIT_CWD, 'package.json');
+
+const config = require(pkgJson);
+const customLibs = Array.isArray(config && config.dll) ? config.dll : [];
+
+module.exports = {
+  mode: 'development',
+  entry: {
+    libs: [
+      'react',
+      'react-dom',
+      'react-router',
+      'react-router-dom',
+      ...customLibs,
+    ],
+  },
+
+  output: {
+    filename: '[name].dll.js',
+    path: outputPath,
+
+    // The name of the global variable which the library's
+    // require() function will be assigned to
+    library: '[name]_dll',
+  },
+
+  plugins: [
+    new webpack.DllPlugin({
+      // The path to the manifest file which maps between
+      // modules included in a bundle and the internal IDs
+      // within that bundle
+      path: path.join(outputPath, '[name]-manifest.json'),
+      // The name of the global variable which the library's
+      // require function has been assigned to. This must match the
+      // output.library option above
+      name: '[name]_dll',
+    }),
+  ],
+};

packages/sample/package.json

@@ -12,6 +12,8 @@
   },
   "scripts": {
     "start": "more start",
-    "build": "more build"
+    "build": "more build",
+    "dll": "more dll",
+    "postinstall": "more dll"
   }
 }