feat: code split & use react helmet

lib/webpack/base.js

@@ -4,7 +4,7 @@ const path = require('path');
 
 const mdLoader = require.resolve('./loader/markdown');
 
-module.exports = function createBaseConfig(props) {
+module.exports = function createBaseConfig(props, isServer) {
   const {
     siteConfig,
     outDir,
@@ -34,6 +34,7 @@ module.exports = function createBaseConfig(props) {
     .set('@site', siteDir)
     .set('@docs', docsDir)
     .set('@pages', pagesDir)
+    .set('@build', outDir)
     .set('@generated', path.resolve(__dirname, '../core/generated'))
     .set('@core', path.resolve(__dirname, '../core'))
     .end();
@@ -44,7 +45,8 @@ module.exports = function createBaseConfig(props) {
       .loader('babel-loader')
       .options({
         babelrc: false,
-        presets: ['env', 'react']
+        presets: ['env', 'react'],
+        plugins: [isServer ? 'dynamic-import-node' : 'syntax-dynamic-import']
       });
   }
 

lib/webpack/client.js

@@ -0,0 +1,20 @@
+const path = require('path');
+const webpackNiceLog = require('webpack-nicelog');
+const {StatsWriterPlugin} = require('webpack-stats-plugin');
+const createBaseConfig = require('./base');
+
+module.exports = function createClientConfig(props) {
+  const config = createBaseConfig(props);
+
+  config.entry('main').add(path.resolve(__dirname, '../core/clientEntry.js'));
+
+  // write webpack stats object to a file so we can
+  // programmatically refer to the correct bundle path in Node.js server.
+  config
+    .plugin('stats')
+    .use(StatsWriterPlugin, [{filename: 'client.stats.json'}]);
+
+  config.plugin('niceLog').use(webpackNiceLog, [{name: 'Client'}]);
+
+  return config;
+};

lib/webpack/dev.js

@@ -1,24 +0,0 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const webpackNiceLog = require('webpack-nicelog');
-const createBaseConfig = require('./base');
-
-module.exports = function createDevConfig(props) {
-  const config = createBaseConfig(props);
-
-  config.entry('main').add(path.resolve(__dirname, '../core/devEntry.js'));
-
-  const {siteConfig} = props;
-  config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [
-    {
-      inject: false,
-      hash: true,
-      template: path.resolve(__dirname, '../core/devTemplate.ejs'),
-      filename: 'index.html',
-      title: siteConfig.title
-    }
-  ]);
-  config.plugin('niceLog').use(webpackNiceLog, [{name: 'Development'}]);
-
-  return config;
-};

lib/webpack/server.js

@@ -1,15 +1,16 @@
 const path = require('path');
-const fs = require('fs');
-const ejs = require('ejs');
 const staticSiteGenerator = require('static-site-generator-webpack-plugin');
 const webpackNiceLog = require('webpack-nicelog');
 const createBaseConfig = require('./base');
 
 module.exports = function createProdConfig(props) {
-  const config = createBaseConfig(props);
+  const config = createBaseConfig(props, true);
 
-  config.entry('main').add(path.resolve(__dirname, '../core/prodEntry.js'));
-  config.output.libraryTarget('umd');
+  config.entry('main').add(path.resolve(__dirname, '../core/serverEntry.js'));
+
+  config.target('node');
+
+  config.output.filename('server.bundle.js').libraryTarget('commonjs2');
 
   // Workaround for Webpack 4 Bug (https://github.com/webpack/webpack/issues/6522)
   config.output.globalObject('this');
@@ -18,25 +19,19 @@ module.exports = function createProdConfig(props) {
 
   // static site generator webpack plugin
   const paths = [...docsData, ...pagesData].map(data => data.path);
-  const template = ejs.compile(
-    fs.readFileSync(
-      path.resolve(__dirname, '../core/prodTemplate.ejs'),
-      'utf-8'
-    )
-  );
   config.plugin('siteGenerator').use(staticSiteGenerator, [
     {
       entry: 'main',
       locals: {
-        title: siteConfig.title || 'Munseo',
-        baseUrl: siteConfig.baseUrl,
-        template
+        baseUrl: siteConfig.baseUrl
       },
       paths
     }
   ]);
   // show compilation progress bar and build time
-  config.plugin('niceLog').use(webpackNiceLog, [{name: 'Production'}]);
+  config
+    .plugin('niceLog')
+    .use(webpackNiceLog, [{name: 'Server', color: 'yellow'}]);
 
   return config;
 };