Integrate Webpack Validator Into Webpack.Config.js

.travis.yml

@@ -2,7 +2,6 @@
 language: cpp
 sudo: false
 env:
-  - export NODE_VERSION="0.12"
   - export NODE_VERSION="4"
   - export NODE_VERSION="6"
 os:

bin/gatsby.js

@@ -9,14 +9,11 @@ global.appStartTime = Date.now()
 var sysPath = require('path')
 var fs = require('fs')
 var version = process.version
-var versionDigits = version.split('.')
-  .map(function (d) { return d.match(/\d+/)[0] })
-  .slice(0, 2).join('.')
-var verDigit = Number(versionDigits)
+var verDigit = Number(version.match(/\d+/)[0])
 
-if (verDigit < 0.12) {
+if (verDigit < 4) {
   console.error(
-    'Error: Gatsby 0.9+ requires node.js v0.12 or higher (you have ' + version + ') ' +
+    'Error: Gatsby 0.13+ requires node.js v4 or higher (you have ' + version + ') ' +
     'Upgrade node to the latest stable release.'
   )
   process.exit()

lib/utils/build-css.js

@@ -1,14 +1,16 @@
 /* @flow weak */
+
+import fs from 'fs'
 import webpack from 'webpack'
+
 import webpackConfig from './webpack.config'
-import fs from 'fs'
 
 module.exports = (program, callback) => {
   const { directory } = program
 
   const compilerConfig = webpackConfig(program, directory, 'build-css')
 
-  return webpack(compilerConfig.resolve()).run((err, stats) => {
+  return webpack(compilerConfig).run((err, stats) => {
     // We don't want any javascript produced by this step in the process.
     fs.unlinkSync(`${directory}/public/bundle-for-css.js`)
 

lib/utils/build-html.js

@@ -16,7 +16,7 @@ module.exports = (program, callback) => {
     // Static site generation.
     const compilerConfig = webpackConfig(program, directory, 'build-html', null, routes)
 
-    webpack(compilerConfig.resolve()).run((e, stats) => {
+    webpack(compilerConfig).run((e, stats) => {
       if (e) {
         return callback(e, stats)
       }

lib/utils/build-javascript.js

@@ -7,5 +7,5 @@ module.exports = (program, callback) => {
 
   const compilerConfig = webpackConfig(program, directory, 'build-javascript')
 
-  return webpack(compilerConfig.resolve()).run(callback)
+  return webpack(compilerConfig).run(callback)
 }

lib/utils/develop.js

@@ -32,7 +32,7 @@ function startServer (program) {
   return globPages(directory, (err, pages) => {
     const compilerConfig = webpackConfig(program, directory, 'develop', program.port)
 
-    const compiler = webpack(compilerConfig.resolve())
+    const compiler = webpack(compilerConfig)
 
     let HTMLPath = `${directory}/html`
     // Check if we can't find an html component in root of site.
@@ -42,7 +42,7 @@ function startServer (program) {
 
     const htmlCompilerConfig = webpackConfig(program, directory, 'develop-html', program.port)
 
-    webpackRequire(htmlCompilerConfig.resolve(), require.resolve(HTMLPath), (error, factory) => {
+    webpackRequire(htmlCompilerConfig, require.resolve(HTMLPath), (error, factory) => {
       if (error) {
         console.log(`Failed to require ${directory}/html.js`)
         error.forEach((e) => {

lib/utils/validate-webpack-config.js

@@ -0,0 +1,47 @@
+import _ from 'lodash'
+import invariant from 'invariant'
+import path from 'path'
+import validate from 'webpack-validator'
+
+let modifyWebpackConfig
+try {
+  const gatsbyNodeConfig = path.resolve(process.cwd(), './gatsby-node')
+  const nodeConfig = require(gatsbyNodeConfig)
+  modifyWebpackConfig = nodeConfig.modifyWebpackConfig
+} catch (e) {
+  if (e.code !== 'MODULE_NOT_FOUND' && !_.includes(e.Error, 'gatsby-node')) {
+    console.log(e)
+  }
+}
+
+export default function ValidateWebpackConfig (module, config, stage) {
+  let userWebpackConfig = module(config)
+  if (modifyWebpackConfig) {
+    userWebpackConfig = modifyWebpackConfig(userWebpackConfig, stage)
+
+    invariant(_.isObject(userWebpackConfig) && _.isFunction(userWebpackConfig.resolve),
+      `
+      You must return an webpack-configurator instance when modifying the Webpack config.
+      Returned: ${userWebpackConfig}
+      stage: ${stage}
+      `)
+  }
+
+  const validationState = validate(userWebpackConfig.resolve(), {
+    returnValidation: true,
+  })
+
+  if (!validationState.error) {
+    return userWebpackConfig
+  }
+
+  console.log('There were errors with your webpack config:')
+  validationState.error.details.forEach((err, index) => {
+    console.log(`[${index + 1}]`)
+    console.log(err.path)
+    console.log(err.type, ',', err.message)
+    console.log('\n')
+  })
+
+  return process.exit(1)
+}

lib/utils/webpack.config.js

@@ -1,24 +1,14 @@
+import fs from 'fs'
+import path from 'path'
 import webpack from 'webpack'
-import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin'
-import ExtractTextPlugin from 'extract-text-webpack-plugin'
 import Config from 'webpack-configurator'
-const debug = require('debug')('gatsby:webpack-config')
-import path from 'path'
-import _ from 'lodash'
-import invariant from 'invariant'
+import ExtractTextPlugin from 'extract-text-webpack-plugin'
+import StaticSiteGeneratorPlugin from 'static-site-generator-webpack-plugin'
 
 import babelConfig from './babel-config'
+import validateWebpackConfig from './validate-webpack-config'
 
-let modifyWebpackConfig
-try {
-  const gatsbyNodeConfig = path.resolve(process.cwd(), './gatsby-node')
-  const nodeConfig = require(gatsbyNodeConfig)
-  modifyWebpackConfig = nodeConfig.modifyWebpackConfig
-} catch (e) {
-  if (e.code !== 'MODULE_NOT_FOUND' && !_.includes(e.Error, 'gatsby-node')) {
-    console.log(e)
-  }
-}
+const debug = require('debug')('gatsby:webpack-config')
 
 // Five stages or modes:
 //   1) develop: for `gatsby develop` command, hot reload and CSS injection into page
@@ -428,6 +418,31 @@ module.exports = (program, directory, suppliedStage, webpackPort = 1500, routes
     }
   }
 
+  function resolveLoader () {
+    const root = [
+      path.resolve(__dirname, '..', 'loaders'),
+    ]
+
+    const userLoaderDirectoryPath = path.resolve(directory, 'loaders')
+
+    try {
+      if (fs.statSync(userLoaderDirectoryPath).isDirectory()) {
+        root.push(userLoaderDirectoryPath)
+      }
+    } catch (e) {
+      if (e && e.code !== 'ENOENT') {
+        console.log(e)
+      }
+    }
+
+    return {
+      root,
+      modulesDirectories: [
+        'node_modules',
+      ],
+    }
+  }
+
   const config = new Config()
 
   config.merge({
@@ -439,33 +454,10 @@ module.exports = (program, directory, suppliedStage, webpackPort = 1500, routes
     debug: true,
     devtool: devtool(),
     output: output(),
-    resolveLoader: {
-      // Hierarchy of directories for Webpack to look for loaders.
-      // First is the /loaders/ directory in the site.
-      // Then in the special directory of loaders Gatsby ships with.
-      // Then the site's node_modules directory
-      // and last the Gatsby node_modules directory.
-      root: [
-        path.resolve(directory, 'loaders'),
-        path.resolve(__dirname, '..', 'loaders'),
-        path.resolve(directory, 'node_modules'),
-        path.resolve(directory, 'node_modules/gatsby/node_modules'),
-      ],
-    },
+    resolveLoader: resolveLoader(),
     plugins: plugins(),
     resolve: resolve(),
   })
 
-  if (modifyWebpackConfig) {
-    const modifiedWebpackConfig = modifyWebpackConfig(module(config), stage)
-    invariant(_.isObject(modifiedWebpackConfig),
-              `
-              You must return an object when modifying the Webpack config.
-              Returned: ${modifiedWebpackConfig}
-              stage: ${stage}
-              `)
-    return modifiedWebpackConfig
-  } else {
-    return module(config)
-  }
+  return validateWebpackConfig(module, config, stage)
 }

package.json

@@ -26,6 +26,7 @@
     "babel-preset-react-hmre": "^1.1.1",
     "babel-preset-stage-0": "^6.5.0",
     "boom": "^2.7.2",
+    "chalk": "^1.1.3",
     "cjsx-loader": "^3.0.0",
     "coffee-loader": "^0.7.2",
     "coffee-script": "^1.9.3",
@@ -85,6 +86,7 @@
     "webpack-configurator": "^0.3.0",
     "webpack-hot-middleware": "^2.12.2",
     "webpack-require": "0.0.16",
+    "webpack-validator": "^2.2.7",
     "yaml-loader": "^0.4.0"
   },
   "devDependencies": {
@@ -112,7 +114,7 @@
     "nyc": "^7.0.0"
   },
   "engines": {
-    "node": ">0.12.0"
+    "node": ">4.0.0"
   },
   "homepage": "https://github.com/gatsbyjs/gatsby#readme",
   "keywords": [