Merge pull request #40 from fs-webdev/hf

Support for HF

Author: tylergraf

packages/react-scripts/config/webpack.config.js

@@ -31,6 +31,8 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
@@ -44,6 +46,9 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// FS - check if hf is installed in root node_modules
+const isHF = fs.existsSync(path.join(paths.appNodeModules, 'hf/webpack.config.js'));
+
 // style files regexes
 const cssRegex = /\.css$/;
 const cssModuleRegex = /\.module\.css$/;
@@ -237,12 +242,15 @@ module.exports = function(webpackEnv) {
       // https://twitter.com/wSokra/status/969633336732905474
       // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
       splitChunks: {
-        chunks: 'all',
+        // FS - split chunks was causing issues for webpacked hf build, async fixes it so that it doesn't
+        // try to use the same chunks for async/non-async assets
+        chunks: isHF ? 'async' : 'all',
         name: false,
       },
       // Keep the runtime chunk separated to enable long term caching
       // https://twitter.com/wSokra/status/969679223278505985
-      runtimeChunk: true,
+      // FS - Turn off for hf since it causes issues with imports in hf js files.
+      runtimeChunk: !isHF,
     },
     resolve: {
       // This allows you to set a fallback for where Webpack should look for modules.
@@ -512,12 +520,23 @@ module.exports = function(webpackEnv) {
       ],
     },
     plugins: [
+      // FS - copy over hf's webpack built files to /static/hf directory to be
+      // used by snow.
+      isHF &&
+        new CopyWebpackPlugin([
+          {
+            from: path.join(paths.appNodeModules, `hf/dist/${isEnvProduction ? 'prod' : 'dev'}`),
+            to: 'static/hf/[name].[ext]',
+            toType: 'template',
+          },
+        ]),
       // Generates an `index.html` file with the <script> injected.
       new HtmlWebpackPlugin(
         Object.assign(
           {},
           {
             inject: true,
+            filename: isHF ? '_index.html' : 'index.html',
             template: paths.appHtml,
           },
           isEnvProduction

packages/react-scripts/config/webpackDevServer.config.js

@@ -14,10 +14,13 @@ const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMi
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const paths = require('./paths');
 const fs = require('fs');
+const path = require('path');
 
 const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
 
+const isHF = fs.existsSync(path.join(paths.appNodeModules, 'hf/webpack.config.js'));
+
 module.exports = function(proxy, allowedHost) {
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
@@ -36,8 +39,7 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    disableHostCheck: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
     // Enable gzip compression of generated files.
     compress: true,
     // Silence WebpackDevServer's own logs since they're generally not useful.
@@ -108,5 +110,8 @@ module.exports = function(proxy, allowedHost) {
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
       app.use(noopServiceWorkerMiddleware());
     },
+    // FS - write to disk so that snow can serve assets
+    // looking them up with the manifestMap provided by hf
+    writeToDisk: isHF,
   };
 };