Updated webpack-config (#409)

* Updated webpack config

* Removed web polyfills
* Udpated index.html style
* Use primaryColor for msapplication navbutton-color
* Moved WebpackDeepScopeAnalysisPlugin to common
* Removed vendoring
* Added support for `.otf` fonts
* Removed custom optimization in favor of webpack defaults
* Removed terser

* Update yarn.lock

Author: EvanBacon

packages/webpack-config/package.json

@@ -10,7 +10,6 @@
     "@babel/core": "^7.0.0",
     "@babel/polyfill": "^7.2.5",
     "babel-loader": "^8.0.5",
-    "babel-preset-expo": "^5.0.0",
     "brotli-webpack-plugin": "^1.1.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "clean-webpack-plugin": "^1.0.1",
@@ -24,7 +23,6 @@
     "pnp-webpack-plugin": "^1.2.1",
     "progress-bar-webpack-plugin": "^1.12.1",
     "react-dev-utils": "^7.0.3",
-    "terser-webpack-plugin": "^1.2.2",
     "url-loader": "^1.1.2",
     "webpack": "4.24.0",
     "webpack-bundle-analyzer": "^3.0.4",

packages/webpack-config/web-default/index.html

@@ -18,6 +18,8 @@
       body,
       #main {
         height: 100%;
+        margin: 0px;
+        padding: 0px;
       }
       #main {
         display: flex;
@@ -31,10 +33,12 @@
     <div id="main"></div>
 
     <script>
-      if ('serviceWorker' in navigator)
+      if ('serviceWorker' in navigator) {
         window.addEventListener('load', function() {
           navigator.serviceWorker.register('/service-worker.js');
         });
+      }
     </script>
+
   </body>
 </html>

packages/webpack-config/webpack/createIndexHTMLFromAppJSON.js

@@ -5,17 +5,19 @@ function createIndexHTMLFromAppJSON(locations) {
 
   const { expo: expoManifest = {} } = nativeAppManifest;
 
+  const color = expoManifest.primaryColor || '#000000';
+
   const metaTags = {
     viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
     description: expoManifest.description || 'A Neat Expo App',
-    'theme-color': expoManifest.primaryColor || '#000000',
+    'theme-color': color,
     'apple-mobile-web-app-capable': 'yes',
     // default, black, black-translucent
     'apple-mobile-web-app-status-bar-style': 'default',
     'apple-mobile-web-app-title': expoManifest.name,
     'application-name': expoManifest.name,
     // Windows
-    'msapplication-navbutton-color': '',
+    'msapplication-navbutton-color': color,
     'msapplication-TileColor': '',
     'msapplication-TileImage': '',
   };

packages/webpack-config/webpack/webpack.common.js

@@ -5,6 +5,7 @@ const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
 const getLocations = require('./webpackLocations');
 const createIndexHTMLFromAppJSON = require('./createIndexHTMLFromAppJSON');
 const createClientEnvironment = require('./createClientEnvironment');
@@ -83,7 +84,7 @@ module.exports = function(env) {
   const nativeAppManifest = require(locations.appJson);
 
   const ttfLoaderConfiguration = {
-    test: /\.ttf$/,
+    test: /\.(ttf|otf)$/,
     use: [
       {
         loader: 'url-loader',
@@ -106,24 +107,7 @@ module.exports = function(env) {
     exclude: locations.template.folder,
   };
 
-  // This method intercepts modules being referenced in react-native
-  // and redirects them to web friendly versions in expo.
-  function getWebModule(initialRoot, moduleName) {
-    return function(res) {
-      if (res.context.includes('node_modules/react-native/')) {
-        res.request = locations.includeModule(initialRoot + moduleName);
-      }
-    };
-  }
-
-  function useWebModule(modulePathToHiJack, redirectPath, initialRoot = 'expo/build/web/') {
-    return new webpack.NormalModuleReplacementPlugin(
-      new RegExp(modulePathToHiJack),
-      getWebModule(initialRoot, redirectPath)
-    );
-  }
-
-  const publicPath = '/';
+  const publicPath = ''.replace(/\/$/, '');
 
   return {
     context: __dirname,
@@ -160,13 +144,9 @@ module.exports = function(env) {
         fileName: 'asset-manifest.json',
         publicPath,
       }),
-
       new webpack.DefinePlugin(clientEnv),
-
-      useWebModule('Performance/Systrace', 'Performance/Systrace'),
-      useWebModule('RCTNetworking', 'Network/RCTNetworking'),
-      useWebModule('Platform', 'Utilities/Platform'),
-      useWebModule('HMRLoadingView', 'Utilities/HMRLoadingView'),
+      // Remove unused import/exports
+      new WebpackDeepScopeAnalysisPlugin(),
 
       new WorkboxPlugin.GenerateSW({
         skipWaiting: true,

packages/webpack-config/webpack/webpack.prod.js

@@ -2,10 +2,8 @@ const merge = require('webpack-merge');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const BrotliPlugin = require('brotli-webpack-plugin');
-const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
 
 const common = require('./webpack.common.js');
 const getLocations = require('./webpackLocations');
@@ -24,131 +22,45 @@ module.exports = function(env = {}) {
   return merge(common(env), {
     mode: 'production',
     entry: {
-      vendor: ['react', 'react-native-web'],
       app: appEntry,
     },
     devtool: 'source-map',
     plugins: [
-      /** Delete the build folder  */
+      // Delete the build folder
       new CleanWebpackPlugin([locations.production.folder], {
         root: locations.root,
         verbose: true,
         dry: false,
       }),
-      /** Remove unused import/exports  */
-      new WebpackDeepScopeAnalysisPlugin(),
+
+      new CopyWebpackPlugin([
+        {
+          from: locations.template.folder,
+          to: locations.production.folder,
+          ignore: 'index.html',
+        },
+      ]),
 
       new MiniCssExtractPlugin({
         filename: 'static/css/[contenthash].css',
         chunkFilename: 'static/css/[contenthash].chunk.css',
       }),
 
-      /** GZIP files */
+      // GZIP files
       new CompressionPlugin({
         test: /\.(js|css)$/,
         filename: '[path].gz[query]',
         algorithm: 'gzip',
         threshold: 1024,
         minRatio: 0.8,
       }),
-      /** secondary compression for platforms that load .br  */
+      // secondary compression for platforms that load .br
       new BrotliPlugin({
         asset: '[path].br[query]',
         test: /\.(js|css)$/,
         threshold: 1024,
         minRatio: 0.8,
       }),
-
-      /** Copy the PWA manifest.json and the caching policy serve.json from the template folder to the build folder  */
-      new CopyWebpackPlugin([
-        {
-          from: locations.template.manifest,
-          to: locations.production.manifest,
-        },
-        {
-          from: locations.template.serveJson,
-          to: locations.production.serveJson,
-        },
-      ]),
     ],
-    optimization: {
-      usedExports: true,
-      concatenateModules: true,
-      occurrenceOrder: true,
-      minimize: true,
-      minimizer: [
-        new TerserPlugin({
-          cache: true,
-          sourceMap: true,
-          parallel: true,
-          extractComments: 'all',
-          terserOptions: {
-            warnings: false,
-            parse: {
-              ecma: 8,
-            },
-            compress: {
-              ecma: 5,
-              warnings: false,
-              comparisons: false,
-              inline: 2,
-            },
-            mangle: {
-              safari10: true,
-            },
-            output: {
-              ecma: 5,
-              comments: false,
-              ascii_only: true,
-            },
-            module: false,
-            toplevel: false,
-            nameCache: null,
-            ie8: false,
-            keep_classnames: undefined,
-            keep_fnames: false,
-          },
-        }),
-      ],
-      splitChunks: {
-        chunks: 'all',
-        maxInitialRequests: Infinity,
-        maxAsyncRequests: 5,
-        minSize: 0,
-        maxSize: 0,
-        minChunks: Infinity,
-        automaticNameDelimiter: '~',
-        name: true,
-        cacheGroups: {
-          vendor: {
-            chunks: 'all',
-            priority: -10,
-            test: /[\\/]node_modules[\\/]/,
-            // name of the chunk
-            name(module) {
-              // get the name. E.g. node_modules/packageName/not/this/part.js
-              // or node_modules/packageName
-              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
-
-              // npm package names are URL-safe, but some servers don't like @ symbols
-              return `npm.${packageName.replace('@', '')}`;
-            },
-          },
-          default: {
-            minChunks: 2,
-            priority: -20,
-            reuseExistingChunk: true,
-          },
-          commons: {
-            name: 'commons',
-            chunks: 'initial',
-            minChunks: 2,
-            priority: 10,
-            reuseExistingChunk: true,
-            enforce: true,
-          },
-        },
-      },
-    },
   });
 };