WIP: Code splitting and serve through webpack-dev-server

app/components/App.jsx

@@ -9,12 +9,6 @@ Meteor.call('sayHello', function(err, res) {
   console.log(res);
 });
 
-if (Meteor.isServer) {
-  // Template does not support server side
-  var Template = {
-    loginButtons: 'any'
-  };
-}
 
 @reactMixin.decorate(ReactMeteorData)
 export default class App extends Component {
@@ -25,11 +19,15 @@ export default class App extends Component {
   }
 
   render() {
+    // Template does not support server side
+    let _Template = typeof(Template) === 'function' ? Template : {
+      loginButtons: 'any'
+    };
     let userCount = Users.find().fetch().length;
     let postsCount = Posts.find().fetch().length;
     return (
       <div className="App">
-        <BlazeTemplate template={Template.loginButtons} />
+        <BlazeTemplate template={_Template.loginButtons} />
         <h1>Hello Webpack!</h1>
         <p>There are {userCount} users in the Minimongo  (login to change)</p>
         <p>There are {postsCount} posts in the Minimongo  (autopublish removed)</p>

dev.js

@@ -28,7 +28,8 @@ serverConfig.plugins.push(new webpack.BannerPlugin(
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
 var serverBundleRequirePath = serverBundlePath.replace(/\\/g, '\\\\');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
-var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
+var clientBundleLink = path.join(dirs.meteor, 'client/zclient.bundle.min.js');
+var vendorBundleLink = path.join(dirs.meteor, 'client/vendor.bundle.min.js');
 var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
 
@@ -37,6 +38,7 @@ var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle
 require('./core-js-custom-build');
 
 if (fs.existsSync(clientBundleLink)) rm(clientBundleLink);
+if (fs.existsSync(vendorBundleLink)) rm(vendorBundleLink);
 if (fs.existsSync(serverBundleLink)) rm(serverBundleLink);
 
 var serverCompiler = webpack(serverConfig);
@@ -52,7 +54,7 @@ serverCompiler.watch({
     serverBundleReady = true;
     compileClient();
     runMeteor();
-  }  
+  }
 });
 
 function compileClient() {
@@ -74,4 +76,4 @@ function updateRequireServerBundleJs(stats) {
   ('//' + jsonStats.hash + '\n' +
   'Meteor.__mwrContext__ = {Npm: Npm, Assets: Assets};\n' +
   'Npm.require("' + serverBundleRequirePath + '");').to(requireServerBundleJs);
-}
+}

meteor_core/meteor.html

@@ -6,6 +6,7 @@
   <div id="root" class="container">
     <header>
       <h1>Loading...</h1>
+      <p>Development mode? Use port 9090 <a href="/" onclick="javascript:event.target.port=9090">http://127.0.0.1:9090/</a></p>
     </header>
   </div>
-</body>
+</body>

package.json

@@ -22,15 +22,14 @@
     "karma-webpack": "^1.7.0",
     "node-libs-browser": "^0.5.2",
     "null-loader": "^0.1.1",
-    "react-transform-catch-errors": "^1.0.0",
     "react-transform-hmr": "^1.0.0",
-    "redbox-react": "^1.0.1",
     "regenerator": "^0.8.36",
     "shelljs": "^0.5.3",
     "source-map-support": "^0.3.2",
     "style-loader": "^0.12.3",
     "webpack": "^1.10.1",
-    "webpack-dev-server": "^1.10.1"
+    "webpack-dev-server": "^1.10.1",
+    "webpack-split-by-path": "0.0.6"
   },
   "dependencies": {
     "classnames": "^2.1.3",

predeploy.js

@@ -16,16 +16,18 @@ addProgressPlugin(clientConfig);
 serverConfig.plugins.push(new webpack.BannerPlugin('var require = Npm.require;\n', {raw: true}));
 
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
+var vendorBundlePath = path.join(dirs.assets, 'vendor.bundle.js');
 var clientBundlePath = path.join(dirs.assets, 'client.bundle.js');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
-var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
+var vendorBundleLink = path.join(dirs.meteor, 'client/vendor.bundle.min.js');
+var clientBundleLink = path.join(dirs.meteor, 'client/zclient.bundle.min.js');
 var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
 var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle.js');
 
-module.exports = function(callback) {
-  require('./core-js-custom-build');
+require('./core-js-custom-build');
 
+module.exports = function(callback) {
   if (!process.env.NODE_ENV) {
     process.env.NODE_ENV = env.NODE_ENV = 'production';
   }
@@ -60,6 +62,7 @@ module.exports = function(callback) {
         return callback(new Error('Webpack reported compilation errors'));
       }
       ln('-sf', clientBundlePath, clientBundleLink);
+      ln('-sf', vendorBundlePath, vendorBundleLink);
       return callback();
     });
   }

prod.js

@@ -19,9 +19,11 @@ addProgressPlugin(clientConfig);
 serverConfig.plugins.push(new webpack.BannerPlugin('var require = Npm.require;\n', {raw: true}));
 
 var serverBundlePath = path.join(dirs.assets, 'server.bundle.js');
+var vendorBundlePath = path.join(dirs.assets, 'vendor.bundle.js');
 var clientBundlePath = path.join(dirs.assets, 'client.bundle.js');
 var serverBundleLink = path.join(dirs.meteor, 'server/server.bundle.min.js');
-var clientBundleLink = path.join(dirs.meteor, 'client/client.bundle.min.js');
+var vendorBundleLink = path.join(dirs.meteor, 'client/vendor.bundle.min.js');
+var clientBundleLink = path.join(dirs.meteor, 'client/zclient.bundle.min.js');
 var loadClientBundleHtml = path.join(dirs.webpack, 'loadClientBundle.html');
 var loadClientBundleLink = path.join(dirs.meteor, 'client/loadClientBundle.html');
 var requireServerBundleJs = path.join(dirs.meteor, 'server/require.server.bundle.js');
@@ -41,7 +43,7 @@ serverCompiler.watch(serverConfig.watchOptions || {}, function(err, stats) {
     serverBundleReady = true;
     ln('-sf', serverBundlePath, serverBundleLink);
     compileClient();
-  }  
+  }
 });
 
 function compileClient() {
@@ -51,8 +53,9 @@ function compileClient() {
     if (!clientBundleReady) {
       clientBundleReady = true;
       ln('-sf', clientBundlePath, clientBundleLink);
+      ln('-sf', vendorBundlePath, vendorBundleLink);
       runMeteor();
-    }  
+    }
   });
 }
 

webpack/loadClientBundle.html

@@ -1,10 +1,5 @@
 <head>
-  <script type="text/javascript">
-    // unfortunately it's not possible to make a URL relative to the current host with a different port,
-    // so the URL must be created by script like this if we want to test on devices besides localhost.
-    var scriptElem = document.createElement('script');
-    scriptElem.type = 'text/javascript';
-    scriptElem.src = /https?:\/\/[^:\/]+/.exec(window.location.href)[0] + ':9090/assets/client.bundle.js';
-    document.head.appendChild(scriptElem);
-  </script>
-</head>
+  <!-- load webpack bundles -->
+  <script src="/assets/vendor.bundle.js"></script>
+  <script src="/assets/client.bundle.js"></script>
+</head>

webpack/webpack.config.client.dev.js

@@ -4,11 +4,12 @@ var _ = require('lodash');
 var devProps = require('./devProps');
 
 var config = module.exports = _.assign(_.clone(config), {
-  devtool: 'eval',
-  entry: [
-    'webpack-dev-server/client?' + devProps.baseUrl,
-    'webpack/hot/only-dev-server',
-  ].concat(config.entry),
+  entry: {
+    client: [
+      'webpack-dev-server/client?' + devProps.baseUrl,
+      'webpack/hot/only-dev-server',
+    ].concat(config.entry.client),
+  },
   output: _.assign(_.clone(config.output), {
     publicPath: devProps.baseUrl + '/assets/',
     pathinfo: true,
@@ -35,12 +36,6 @@ var config = module.exports = _.assign(_.clone(config), {
                 imports: ['react'],
                 // this is important for Webpack HMR:
                 locals: ['module']
-              },
-              {
-                transform: 'react-transform-catch-errors',
-                // the second import is the React component to render error
-                // (it can be a local path too, like './src/ErrorReporter')
-                imports: ['react', 'redbox-react']
               }]
             }
           },
@@ -55,14 +50,23 @@ var config = module.exports = _.assign(_.clone(config), {
   },
   plugins: (config.plugins || []).concat([
     new webpack.HotModuleReplacementPlugin(),
-    new webpack.NoErrorsPlugin(),
+    // disable build of source maps for node_modules (vendor)
+    new webpack.SourceMapDevToolPlugin({
+      filename: '[file].map',
+      exclude: ['vendor.bundle.js'],
+      columns: false, // no columns in SourceMaps, faster
+      module: true // use SourceMaps from loaders
+    }),
   ]),
   devServer: {
     publicPath: devProps.baseUrl + '/assets/',
     host: devProps.host,
     hot: true,
     historyApiFallback: true,
-    contentBase: devProps.contentBase,
+    contentBase: devProps.baseUrl,
     port: devProps.webpackPort,
+    proxy: {
+      "*": devProps.contentBase,
+    }
   }
 });

webpack/webpack.config.client.js

@@ -1,16 +1,20 @@
 var path = require('path');
 var webpack = require('webpack');
+var SplitByPathPlugin = require('webpack-split-by-path');
 
 module.exports = {
   context: __dirname,
-  entry: [
-    './lib/core-js-no-number',
-    'regenerator/runtime',
-    '../app/main_client',
-  ],
+  entry: {
+    client: [
+      './lib/core-js-no-number',
+      'regenerator/runtime',
+      '../app/main_client',
+    ],
+  },
   output: {
     path: path.join(__dirname, 'assets'),
-    filename: 'client.bundle.js',
+    filename: '[name].bundle.js',
+    chunkFilename: '[name].bundle.js',
     publicPath: '/assets/',
   },
   resolve: {
@@ -21,7 +25,7 @@ module.exports = {
     loaders: [
       {
         test: /\.jsx?$/,
-        loader: 'babel',
+        loader: 'babel?stage=0',
         exclude: /node_modules|lib/,
       },
       {
@@ -32,6 +36,13 @@ module.exports = {
   },
   plugins: [
     new webpack.PrefetchPlugin("react"),
-    new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment")
+    new webpack.PrefetchPlugin("react/lib/ReactComponentBrowserEnvironment"),
+    // split node_modules into separate bundle (vendor)
+    new SplitByPathPlugin([
+      {
+        name: 'vendor',
+        path: path.join(__dirname, '../node_modules'),
+      }
+    ]),
   ]
 };