Merge pull request #174 from static-dev/webpack2

convert to webpack2

Author: jescalan

lib/config.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const qs = require('querystring')
 const Joi = require('joi')
 const micromatch = require('micromatch')
 const union = require('lodash.union')
@@ -28,7 +27,8 @@ module.exports = class Config {
     // merges API options into app.js options
     let allOpts = merge(this.parseAppJs(opts), opts)
     this.transformSpikeOptionsToWebpack(this.validateOpts(allOpts))
-    this.project = project
+    const sp = this.plugins.find((p) => p.name === 'spikePlugin')
+    sp.options.project = project
   }
 
   /**
@@ -56,13 +56,14 @@ module.exports = class Config {
         value: Joi.array().items(Joi.string()).single()
       }).default({ 'js/main': ['./assets/js/index.js'] }),
       vendor: Joi.array().single(),
-      modulesDirectories: Joi.array().default(['node_modules', 'bower_components']),
       outputDir: Joi.string().default('public'),
+      outputPublicPath: Joi.string(),
       plugins: Joi.array().default([]),
       afterSpikePlugins: Joi.array().default([]),
       module: Joi.object().default().keys({
-        loaders: Joi.array().default([])
+        rules: Joi.array().default([])
       }),
+      devServer: Joi.func(),
       server: Joi.object().default().keys({
         watchOptions: Joi.object().default().keys({
           ignored: Joi.array().default('node_modules')
@@ -136,22 +137,15 @@ module.exports = class Config {
         return `!${path.join(p, i)}`
       }))
 
-    // parse any extra postcss options out to be passed as querystrings
-    const postcssDirectKeys = ['plugins', 'parser', 'stringifier', 'syntax']
-    res.postcssQuery = {}
-    for (const k in res.postcss) {
-      if (postcssDirectKeys.indexOf(k) < 0) res.postcssQuery[k] = res.postcss[k]
-    }
-
     // catch newly added files, put through the pipeline
     res.server.files = [{
       match: allWatchedFiles,
       fn: (event, file) => {
         const util = new SpikeUtils(this)
         const f = path.join(this.context, file.replace(p, ''))
-        const files = this.spike.files.all
-        if (files.indexOf(f) < 0 && !util.isFileIgnored(f) && event !== 'addDir') {
-          this.project.watcher.watch([], [], [f])
+        const opts = util.getSpikeOptions()
+        if (opts.files.all.indexOf(f) < 0 && !util.isFileIgnored(f) && event !== 'addDir') {
+          opts.project.watcher.watch([], [], [f])
         }
       }
     }]
@@ -167,20 +161,20 @@ module.exports = class Config {
    */
   transformSpikeOptionsToWebpack (opts) {
     // `disallow` options would break spike if modified.
-    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'context']
+    const disallow = ['output', 'resolveLoader', 'spike', 'plugins', 'afterSpikePlugins', 'context', 'outputPublicPath']
 
     // `noCopy` options are spike-specific and shouldn't be directly added to
     // webpack's config
-    const noCopy = ['root', 'matchers', 'env', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir', 'css', 'postcssQuery']
+    const noCopy = ['root', 'matchers', 'env', 'server', 'cleanUrls', 'dumpDirs', 'ignore', 'vendor', 'outputDir', 'css', 'postcss', 'reshape', 'babel']
 
     // All options other than `disallow` or `noCopy` are added directly to
     // webpack's config object
     const filteredOpts = removeKeys(opts, disallow.concat(noCopy))
     Object.assign(this, filteredOpts)
 
     // `noCopy` options are added under the `spike` property
-    this.spike = { files: {} }
-    Object.assign(this.spike, filterKeys(opts, noCopy))
+    const spike = { files: {} }
+    Object.assign(spike, filterKeys(opts, noCopy))
 
     // Now we run some spike-specific config transforms
     this.context = opts.root
@@ -190,9 +184,15 @@ module.exports = class Config {
       filename: '[name].js'
     }
 
+    // this is sometimes necessary for webpackjsonp loads in old browsers
+    if (opts.outputPublicPath) {
+      this.output.publicPath = opts.outputPublicPath
+    }
+
     this.resolveLoader = {
-      root: [
+      modules: [
         path.join(opts.root), // the project root
+        path.join(opts.root, 'node_modules'), // the project node_modules
         path.join(__dirname, '../node_modules'), // spike/node_modules
         path.join(__dirname, '../../../node_modules') // spike's flattened deps, via npm 3+
       ]
@@ -208,34 +208,45 @@ module.exports = class Config {
     const spikeLoaders = [
       {
         exclude: reIgnores,
-        loader: `source-loader!postcss-loader?${qs.stringify(opts.postcssQuery)}`,
-        _core: 'css'
+        test: '/core!css',
+        use: [
+          { loader: 'source-loader' },
+          { loader: 'postcss-loader', options: opts.postcss }
+        ]
       }, {
         exclude: reIgnores,
-        loader: 'babel-loader',
-        _core: 'js'
+        test: '/core!js',
+        use: [
+          { loader: 'babel-loader', options: opts.babel }
+        ]
       }, {
         exclude: reIgnores,
-        loader: 'source-loader!reshape-loader',
-        _core: 'html'
+        test: '/core!html',
+        use: [
+          { loader: 'source-loader' },
+          { loader: 'reshape-loader', options: opts.reshape }
+        ]
       }, {
         exclude: reIgnores,
-        loader: 'source-loader',
-        _core: 'static'
+        test: '/core!static',
+        use: [
+          { loader: 'source-loader' }
+        ]
       }
     ]
 
-    this.module.loaders = spikeLoaders.concat(opts.module.loaders)
+    this.module.rules = spikeLoaders.concat(opts.module.rules)
 
     const util = new SpikeUtils(this)
+    const spikePlugin = new SpikePlugin(util, spike)
 
     this.plugins = [
       ...opts.plugins,
-      new SpikePlugin(util),
+      spikePlugin,
       ...opts.afterSpikePlugins,
       new BrowserSyncPlugin(opts.server, { callback: (_, bs) => {
         if (bs.utils.devIp.length) {
-          this.project.emit('info', `External IP: http://${bs.utils.devIp[0]}:${this.spike.server.port}`)
+          spike.project.emit('info', `External IP: http://${bs.utils.devIp[0]}:${spike.server.port}`)
         }
       } })
     ]

lib/index.js

@@ -22,6 +22,7 @@ const {Error, Warning} = require('./errors')
  * @classdesc Creates a spike project instance and allows interaction with it
  * @param {Object} opts - documented in the readme
  */
+
 class Spike extends EventEmitter {
   constructor (opts = {}) {
     super()
@@ -122,6 +123,9 @@ class Spike extends EventEmitter {
       questionnaire: opts.inquirer
     }
 
+    // TODO: remove this before release
+    if (opts.template === 'base') sproutOptions.branch = 'webpack2'
+
     // run it
     promise
       .tap(() => emit('info', 'initializing template'))
@@ -165,17 +169,17 @@ function npmInstall (opts) {
  */
 function compileCallback (id, err, stats) {
   if (err) {
-    return this.emit('error', new Error({ id: id, err: err }))
+    return this.emit('error', new Error({ id, err }))
   }
   // Webpack "soft errors" are classified as warnings in spike. An error is
   // an error. If it doesn't break the build, it's a warning.
   const cstats = stats.compilation
   if (cstats.errors.length) {
-    this.emit('warning', new Warning({ id: id, err: cstats.errors[0] }))
+    this.emit('warning', new Warning({ id, err: cstats.errors[0] }))
   }
   /* istanbul ignore next */
   if (cstats.warnings.length) {
-    this.emit('warning', new Warning({ id: id, err: cstats.warnings[0] }))
+    this.emit('warning', new Warning({ id, err: cstats.warnings[0] }))
   }
 
   this.emit('compile', {id, stats})

lib/plugin.js

@@ -14,15 +14,16 @@ const difference = require('lodash.difference')
  * the correct extension.
  */
 module.exports = class SpikeWebpackPlugin {
-
   /**
    * @constructor
    * @param {Object} opts - options for configuration
    * @param {String} opts.root - project root
    * @param {Array} opts.dumpDirs - directories to dump to public
    */
-  constructor (util) {
+  constructor (util, opts) {
+    this.name = 'spikePlugin'
     this.util = util
+    this.options = opts
   }
 
   /**
@@ -39,7 +40,7 @@ module.exports = class SpikeWebpackPlugin {
     // inject files into webpack's pipeline
     compiler.plugin('make', (compilation, done) => {
       // stores files to be processed by spike
-      processedFiles = compiler.options.spike.files.process
+      processedFiles = this.options.files.process
       filesOnly = processedFiles.map((f) => f.path)
       // see spike-util for details on this method
       this.util.addFilesAsWebpackEntries(compilation, filesOnly)
@@ -55,6 +56,12 @@ module.exports = class SpikeWebpackPlugin {
           if (el.userRequest === f.path) { return el }
         })
 
+        // if the dep isn't found, we have a bad loader issue
+        // TODO: add a test for this
+        if (!dep) {
+          return new Error(`Module ${f.path} not found in webpack.\nMost likely, this is an issue with trying to add a custom loader. If you are trying to output your custom loader files as static, adding 'source-loader' should solve the issue. If you are trying to require them into your javascript, adding the _skipSpikeProcessing option to your loader config should solve the issue.`)
+        }
+
         // if we have an error in the module, return that
         if (dep.error) return done(dep.error)
 
@@ -103,15 +110,28 @@ module.exports = class SpikeWebpackPlugin {
    * @param {Function} done - callback
    */
   sortFiles (compiler, compilation, done) {
+    // webpack is strict in its validation of loader props. we need to pass an
+    // extra indentifier, so it is passed through the `test` prop, which we
+    // re-assign here before it breaks anything!
+    compiler.options.module.rules.map((rule) => {
+      const match = typeof rule.test === 'string' && rule.test.match(/\/core!(\w+)/)
+      if (match) {
+        rule._core = match[1]
+        delete rule.test
+      }
+      return rule
+    })
+
     // first we load up and categorize all the files in the project
-    compiler.options.spike.files = this.getFilesFromGlob()
+    this.options.files = this.getFilesFromGlob()
 
     // now we set the core loaders' "test" properties to a very precise list of
     // files so that they only load the files we want
-    compiler.options.module.loaders.map((l) => {
-      if (!l._core) { return }
-      l.test = pathToRegex(compiler.options.spike.files[l._core])
+    compiler.options.module.rules.map((rule) => {
+      if (!rule._core) { return }
+      rule.test = pathToRegex(this.options.files[rule._core])
     })
+
     done()
   }
 
@@ -127,7 +147,7 @@ module.exports = class SpikeWebpackPlugin {
     // First, we grab all the files in the project, other than the ignored
     // files of course.
     const matcher = path.join(util.conf.context, '**/**')
-    files.all = glob.sync(matcher, { ignore: util.conf.spike.ignore, dot: true, nodir: true })
+    files.all = glob.sync(matcher, { ignore: this.options.ignore, dot: true, nodir: true })
 
     // There are three special types of files we want to *not* be processed by
     // spike's core plugins. Here, we find these three types of files and push
@@ -140,8 +160,13 @@ module.exports = class SpikeWebpackPlugin {
     // First step, we find any files that are already being processed by a
     // user-added loader that has the `skipSpikeProcessing` key (we will refer
     // to these as "skipLoaders").
-    const skipLoaderTests = util.conf.module.loaders.reduce((m, l) => {
-      if (!l._core && l.skipSpikeProcessing) m.push(l.test); return m
+    const skipLoaderTests = util.conf.module.rules.reduce((m, l) => {
+      const skipInOpts = l.use.find((u) => u.options && u.options._skipSpikeProcessing)
+      if (!l._core && l.use && skipInOpts) {
+        m.push(l.test)
+        delete skipInOpts.options._skipSpikeProcessing
+      }
+      return m
     }, [])
 
     files.skipLoaders = allAvailableFiles.filter((f) => {
@@ -151,13 +176,13 @@ module.exports = class SpikeWebpackPlugin {
     allAvailableFiles = difference(allAvailableFiles, files.skipLoaders)
 
     // Then we grab any files in the `vendored` config
-    files.vendor = matchRelative.call(this, allAvailableFiles, util.conf.spike.vendor)
+    files.vendor = matchRelative.call(this, allAvailableFiles, this.options.vendor)
 
     allAvailableFiles = difference(allAvailableFiles, files.vendor)
 
     // Finally, we pull any javascript files which are processed by webpack
     // internally using the 'js' matcher.
-    files.js = matchRelative.call(this, allAvailableFiles, util.conf.spike.matchers.js)
+    files.js = matchRelative.call(this, allAvailableFiles, this.options.matchers.js)
 
     allAvailableFiles = difference(allAvailableFiles, files.js)
 
@@ -175,9 +200,9 @@ module.exports = class SpikeWebpackPlugin {
     files.static = []
 
     // We start with the core matchers
-    for (const key in util.conf.spike.matchers) {
+    for (const key in this.options.matchers) {
       if (key === 'js') continue // js files are handled by webpack
-      const matcher = util.conf.spike.matchers[key]
+      const matcher = this.options.matchers[key]
       const matchedFiles = matchRelative.call(this, allAvailableFiles, matcher)
 
       // add to the matcher's category so it's handled by the correct loader
@@ -189,9 +214,16 @@ module.exports = class SpikeWebpackPlugin {
     }
 
     // Then we add custom loaders with an 'extension' property
-    util.conf.module.loaders.filter((l) => l.extension).map((l) => {
+    util.conf.module.rules.reduce((m, r) => {
+      const hasExt = r.use.find((u) => u.options && u.options._spikeExtension)
+      if (!hasExt) return m
+      const ext = hasExt.options._spikeExtension
+      delete hasExt.options._spikeExtension
+      m.push([r, ext])
+      return m
+    }, []).map(([r, ext]) => {
       const extensionLoaderMatches = allAvailableFiles.reduce((m, f) => {
-        if (f.match(l.test)) m.push({ path: f, extension: l.extension })
+        if (f.match(r.test)) m.push({ path: f, extension: ext })
         return m
       }, [])
       files.process.push(...extensionLoaderMatches)