Simplify & optimize standalone & website build

build.config.js

@@ -0,0 +1,34 @@
+const assign = require("object-assign")
+
+const dev = process.argv.indexOf("--dev") > -1
+const devServer = process.argv.indexOf("--dev-server") > -1
+const production = process.argv.indexOf("--production") > -1
+
+const config = assign(
+  {
+    __DEV__: dev,
+    __DEV_SERVER__: devServer,
+    __PROD__: production,
+    __SERVER_PROTOCOL__: "http://",
+  },
+  (
+    production
+    ? {
+      "process.env": {
+        NODE_ENV: JSON.stringify("production"),
+      },
+      __SERVER_HOSTNAME__: "cssnext.io",
+      __SERVER_HOST__: "cssnext.io",
+    }
+    : {
+      __SERVER_HOSTNAME__: "0.0.0.0",
+      __SERVER_PORT__: 1985,
+      __SERVER_HOST__: "0.0.0.0:1985",
+      __LR_SERVER_PORT__: 1986,
+    }
+  )
+)
+
+config.__SERVER_URL__ = `${config.__SERVER_PROTOCOL__}${config.__SERVER_HOST__}`
+
+module.exports = config

docs/scripts/build.js

@@ -1,9 +1,7 @@
 import path from "path"
 
 import {sync as rm} from "rimraf"
-import async from "async"
 import color from "chalk"
-import nanoLogger from "nano-logger"
 
 import Metalsmith from "metalsmith"
 import markdown from "metalsmith-md"
@@ -18,26 +16,19 @@ import markdownIt from "markdown-it"
 import markdownOptions from "./markdown"
 import markdownItTocAndAnchor from "markdown-it-toc-and-anchor"
 
-import webpack from "webpack"
-import webpackConfig from "./webpack.config"
-
-// prod
-import copyWithContentHash from "copy-with-content-hash/hash-file"
+import webpack from "./webpack"
+import pkg from "../../package"
+import buildConfig from "../../build.config"
+import webpackConfig from "../../webpack.config"
 
 // dev
 import watch from "metalsmith-watch"
 import devServer from "./webpack-dev-server"
 
-import pkg from "../../package"
-
-import variables, {defineGlobalVariables} from "./variables"
-defineGlobalVariables()
-const DEV_SERVER = process.argv.includes("--dev-server")
-
+import nanoLogger from "nano-logger"
 const log = nanoLogger("./build")
 
-log(color.cyan("- Variables"))
-JSON.stringify(variables, null, 2).split("\n").forEach(l => log(l))
+JSON.stringify(buildConfig, null, 2).split("\n").forEach(l => log(l))
 
 const mdToHtmlReplacement = [/\.md$/, ".html"]
 
@@ -102,21 +93,46 @@ smith
   ])
 )
 
+const webpackComputedConfig = {
+  ...webpackConfig,
+  entry: {
+    index: [
+      "./docs/src/index",
+    ],
+    playground: [
+      "./docs/src/modules/playground/index",
+    ],
+  },
+
+  output: {
+    path: path.join(__dirname, "..", "dist"),
+    filename: "[name].js",
+    publicPath: "/",
+  },
+}
+
 // for development, we build metalsmith first, then we serve via
 // webpack-dev-server which build assets too (no hashes involved)
-if (DEV_SERVER) {
+if (buildConfig.__DEV_SERVER__) {
   smith.metadata().assets = {
+    version: String((new Date()).getTime()),
     scripts: [
       "/index.js",
-      `http://${__SERVER_HOSTNAME__}:${__LR_SERVER_PORT__}/livereload.js`,
+      (
+        `http://${
+          buildConfig.__SERVER_HOSTNAME__
+        }:${
+          buildConfig.__LR_SERVER_PORT__
+        }/livereload.js`
+      ),
     ],
     // css is handled by the js via webpack style-loader
   }
   smith
     .use(
       watch({
         log: nanoLogger("watcher"),
-        livereload: __LR_SERVER_PORT__,
+        livereload: buildConfig.__LR_SERVER_PORT__,
         paths: {
           "${source}/**/*": true,
           "src/layouts/**/*": "**/*.md",
@@ -129,10 +145,10 @@ if (DEV_SERVER) {
         throw err
       }
 
-      devServer({
-        protocol: __SERVER_PROTOCOL__,
-        host: __SERVER_HOSTNAME__,
-        port: __SERVER_PORT__,
+      devServer(webpackComputedConfig, {
+        protocol: buildConfig.__SERVER_PROTOCOL__,
+        host: buildConfig.__SERVER_HOSTNAME__,
+        port: buildConfig.__SERVER_PORT__,
         open: process.argv.includes("--open"),
       })
     })
@@ -141,49 +157,29 @@ if (DEV_SERVER) {
 // for production we build assets first to be able to pass some assets hashes
 // to metalsmith
 else {
-  webpack(webpackConfig, (err, stats) => {
-    if (err) {
-      throw err
-    }
-
-    if (stats.hasErrors()) {
-      stats.compilation.errors.forEach(
-        item => log(...[color.red("Error:"), ...item.message.split("\n")])
-      )
-      throw new Error("webpack build failed with errors")
-    }
-    if (stats.hasWarnings()) {
-      stats.compilation.warnings.forEach(
-        item => log(...[color.yellow("Warning:"), ...item.message.split("\n")])
-      )
-    }
-
-    console.log(color.green("\n✓ Assets build completed"))
+  webpack(webpackComputedConfig, log, (stats) => {
+    log(color.green("✓ Assets build completed"))
 
-    async.map(
-      [
-        "index.js",
-        ...(__PROD__ ? ["index.css"] : []),
+    smith.metadata().assets = {
+      version: stats.hash,
+      scripts: [
+        "/index.js",
       ],
-      (file, cb) => copyWithContentHash(`./docs/dist/${file}`, false, cb),
-      (asynErr, results) => {
-        if (asynErr) {
-          throw asynErr
+      ...buildConfig.__PROD__
+        ? {
+          stylesheets: [
+            "/index.css",
+          ],
         }
+        : {},
+    }
 
-        smith.metadata().assets = {
-          scripts: ["/" + results[0]],
-          ...(__PROD__ ? {stylesheets: ["/" + results[1]]} : {}),
-        }
-        smith
-          .build(buildErr => {
-            if (buildErr) {
-              throw buildErr
-            }
-
-            console.log(color.green("\n✓ Static build completed"))
-          })
+    smith.build(buildErr => {
+      if (buildErr) {
+        throw buildErr
       }
-    )
+
+      log(color.green("✓ Static build completed"))
+    })
   })
 }

docs/scripts/webpack-dev-server.js

@@ -4,16 +4,15 @@ import WebpackDevServer from "webpack-dev-server"
 import opn from "opn"
 import logger from "nano-logger"
 
-import config from "./webpack.config"
-
 const log = logger("webpack-dev-server")
 
-export default (options) => {
+export default (config, options) => {
   options = {
     protocol: "http://",
     host: "0.0.0.0",
     port: 3000,
     open: true,
+    noDevEntriesTest: /^tests/,
     ...(options || {}),
   }
 
@@ -35,20 +34,21 @@ export default (options) => {
       ...Object.keys(config.entry)
         .reduce(
           (acc, key) => {
-            // entries with name that start with "test" do not need extra stuff
-            acc[key] = key.indexOf("tests") === 0 ?
-            config.entry[key] :
-            [
-              ...devEntries,
-              ...config.entry[key],
-            ]
+            // some entries do not need extra stuff
+            acc[key] = key.match(options.noDevEntriesTest) !== null
+              ? config.entry[key]
+              : [
+                ...devEntries,
+                ...config.entry[key],
+              ]
             return acc
           },
           {}
         ),
     },
     plugins: [
       ...(config.plugins || []),
+      ...(options.plugins || []),
       new webpack.NoErrorsPlugin(),
       new webpack.HotModuleReplacementPlugin(),
       webpackNanoLogs,
@@ -70,7 +70,7 @@ export default (options) => {
         // hide all chunk dependencies because it's unreadable
         chunkModules: false,
         // noize
-        assets: true,
+        assets: false,
       },
       noInfo: true,
     })