WIP: Webpack v4

packages/build-config/configs/build.js

@@ -3,59 +3,68 @@
 var path = require('path');
 
 var webpack = require('webpack');
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var UglifyPlugin = require('uglifyjs-webpack-plugin');
 var StatsWriterPlugin = require('webpack-stats-plugin').StatsWriterPlugin;
-var WriteFilePlugin = require('../plugins/write-file');
 var ServiceWorkerPlugin = require('../plugins/service-worker');
+var ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 var hopsConfig = require('hops-config');
 
 var getAssetPath = path.join.bind(path, hopsConfig.assetPath);
 
 module.exports = {
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+  bail: true,
   entry: require.resolve('../shims/build'),
   output: {
     path: hopsConfig.buildDir,
     publicPath: '/',
+    pathinfo: true,
     filename: getAssetPath('[name]-[chunkhash:16].js'),
-    chunkFilename: getAssetPath('chunk-[id]-[chunkhash:16].js'),
+    chunkFilename: getAssetPath('[name]-[id]-[chunkhash:16].js'),
+    devtoolModuleFilenameTemplate: function(info) {
+      return path
+        .relative(hopsConfig.appDir, info.absoluteResourcePath)
+        .replace(/\\/g, '/');
+    },
   },
   context: hopsConfig.appDir,
   resolve: require('../sections/resolve')('build'),
   module: {
     rules: require('../sections/module-rules')('build'),
   },
   devtool: 'source-map',
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          test: function(module) {
+            if (module.resource) {
+              if (
+                module.resource.indexOf('hops-config') > -1 ||
+                module.resource.indexOf('.css') === module.resource.length - 4
+              ) {
+                return false;
+              }
+            }
+            return (
+              module.context && module.context.indexOf('node_modules') > -1
+            );
+          },
+          name: 'vendor',
+          chunks: 'all',
+        },
+      },
+    },
+  },
   plugins: [
-    new WriteFilePlugin(/^manifest\.js(\.map)?$/),
     new StatsWriterPlugin({ fields: null }),
     new ServiceWorkerPlugin(),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: function(module) {
-        if (module.resource) {
-          if (
-            module.resource.indexOf('hops-config') > -1 ||
-            module.resource.indexOf('.css') === module.resource.length - 4
-          ) {
-            return false;
-          }
-        }
-        return module.context && module.context.indexOf('node_modules') > -1;
-      },
-    }),
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
-      filename: 'manifest.js',
-      minChunks: Infinity,
-    }),
-    new webpack.HashedModuleIdsPlugin(),
     new ExtractTextPlugin({
       filename: getAssetPath('[name]-[contenthash:16].css'),
       allChunks: true,
       ignoreOrder: true,
     }),
+    new webpack.HashedModuleIdsPlugin(),
     new webpack.EnvironmentPlugin(
       Object.assign(
         {
@@ -64,13 +73,7 @@ module.exports = {
         hopsConfig.envVars
       )
     ),
-    new webpack.LoaderOptionsPlugin({
-      debug: false,
-      minimize: true,
-      sourceMap: true,
-    }),
     new webpack.optimize.ModuleConcatenationPlugin(),
-    new UglifyPlugin({ sourceMap: true, cache: true, parallel: true }),
   ],
   performance: {
     assetFilter: function(assetFilename) {

packages/build-config/configs/develop.js

@@ -11,15 +11,20 @@ var hopsConfig = require('hops-config');
 var getAssetPath = path.join.bind(path, hopsConfig.assetPath);
 
 module.exports = {
+  mode: 'development',
   entry: [
     require.resolve('webpack-hot-middleware/client'),
     require.resolve('../shims/develop'),
   ],
   output: {
     path: hopsConfig.buildDir,
     publicPath: '/',
+    pathinfo: true,
     filename: getAssetPath('[name].js'),
     chunkFilename: getAssetPath('chunk-[id].js'),
+    devtoolModuleFilenameTemplate: function(info) {
+      return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+    },
   },
   context: hopsConfig.appDir,
   resolve: require('../sections/resolve')('develop'),

packages/build-config/configs/node.js

@@ -26,8 +26,6 @@ function shouldIncludeExternalModuleInBundle(module) {
     module.indexOf('hops') === 0 ||
     module.indexOf('core-js') === 0 ||
     module.indexOf('babel-polyfill') === 0 ||
-    // bundle everything the native require implementation can not handle
-    // see: https://nodejs.org/api/modules.html#modules_all_together
     !/\.(?:js|json|mjs|node)$/.test(require.resolve(module)) ||
     checkEsnext(module)
   );
@@ -37,14 +35,17 @@ var modulesDir = findNodeModules(process.cwd());
 
 module.exports = {
   target: 'node',
+  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
   entry: require.resolve('../shims/node'),
   output: {
     path: hopsConfig.cacheDir,
     publicPath: '/',
+    pathinfo: true,
     filename: 'server.js',
     libraryTarget: 'commonjs2',
-    devtoolModuleFilenameTemplate: '[absolute-resource-path]',
-    devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]',
+    devtoolModuleFilenameTemplate: function(info) {
+      return path.resolve(info.absoluteResourcePath).replace(/\\/g, '/');
+    },
   },
   context: hopsConfig.appDir,
   resolve: require('../sections/resolve')('node'),

packages/build-config/loaders/config.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var fs = require('fs');
 var path = require('path');
 
 var loaderUtils = require('loader-utils');
@@ -37,24 +36,26 @@ function getConfig(config) {
 }
 
 function getNodeConfig() {
-  var config = getConfig(hopsConfig)
-    .replace(/((?:config|file|dir)s?":)("[^"]*")/gi, '$1expand($2)')
-    .replace(/((?:config|file|dir)s?":)\[([^\]]+)\]/gi, function() {
-      return [
-        arguments[1],
-        '[',
-        arguments[2]
-          .split(',')
-          .map(function(p) {
-            return 'expand(' + p + ')';
-          })
-          .join(','),
-        ']',
-      ].join('');
-    });
-  var filepath = require.resolve('../lib/node-config');
-  var template = fs.readFileSync(filepath, 'utf8');
-  return template.replace('/* config definition */', config);
+  return [
+    'var path = require("path");',
+    'var root = require("pkg-dir").sync();',
+    'var expand = path.join.bind(path, root);',
+    getConfig(hopsConfig)
+      .replace(/((?:config|file|dir)s?":)("[^"]*")/gi, '$1expand($2)')
+      .replace(/((?:config|file|dir)s?":)\[([^\]]+)\]/gi, function() {
+        return [
+          arguments[1],
+          '[',
+          arguments[2]
+            .split(',')
+            .map(function(p) {
+              return 'expand(' + p + ')';
+            })
+            .join(','),
+          ']',
+        ].join('');
+      }),
+  ].join('');
 }
 
 function getBrowserConfig() {

packages/build-config/package.json

@@ -36,7 +36,7 @@
     "babel-preset-react": "^6.24.1",
     "caniuse-lite": "^1.0.30000789",
     "css-loader": "^0.28.8",
-    "extract-text-webpack-plugin": "^3.0.2",
+    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
     "file-loader": "^1.1.6",
     "find-up": "^2.1.0",
     "hops-config": "10.2.0-rc.0",
@@ -50,9 +50,8 @@
     "postcss-loader": "^2.0.10",
     "steed": "^1.1.3",
     "style-loader": "^0.20.0",
-    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
-    "webpack": "^3.6.0",
+    "webpack": "^4.0.0-beta.2",
     "webpack-node-externals": "^1.6.0",
     "webpack-sources": "^1.1.0",
     "webpack-stats-plugin": "^0.1.5"