App.js File

The app.js file is nothing more than a thin interface over the top of webpack's configuration. Below is a listing of some of the most important options. If you're looking for an option that you don't see here, check webpack's configuration docs, linked above. Any option listed there works with spike πŸ˜€

OptionDescriptionDefault
root[required] An absolute path to the root of your project.
matchersAn object with html, css, and js keys. Each key is a micromatch string, and represents which files should be pulled into the pipeline to be processed. Typically used to change matched extensions.'**/*.html', '**/*.css', '**/*.js'
reshapeA configuration object passed to reshape, mostly relevant for plugins for HTML processing.{ plugins: [] }
postcssAn object with a plugins key, each of which return an array of plugins to be passed to PostCSS for CSS processing. A parser, stringifier, and/or syntax key can also be on the object, each of which take any of the postcss-loader options. Can also be a function that returns the object. Any options other than the ones specified above will be passed as querystring options.{ plugins: [] }
babelA configuration object for Babel for JS processing.
dumpDirsAn array of directories which, if direct children of the project root, will dump their contents to the root on compile.['views', 'assets']
envString representing the environment you would like to use when compiling. See Environments for more information about this option.
ignoreAn array of micromatch strings, each one defining a file pattern to be ignored from compilation.
outputDirThe name or path of the folder your project will be compiled into, on top of the project's root.public
cleanUrlsRemove .html from your paths during spike.watch.true
vendorA string or array of glob paths used to indicate which files shouldn't be bundled by webpack, but instead are just copied directly to the output folder. See vendor docs for more details.
entryObject directing to the js entry point, see webpack's documentation{ 'js/main': ['./assets/js/index.js'] }
pluginsArray of webpack plugins, see webpack's documentation and spike's documentation for details
afterSpikePluginsArray of webpack plugins that run after spike's core plugin, see webpack's documentation and spike's documentation for details
module.rulesArray of custom loaders, see webpack's documentation and spike's documentation for details
serverAn object that accepts any of browsersync's options for your local server.{ port: 1111, logLevel: 'silent', logPrefix: 'spike', notify: false, host: 'localhost', watchOptions: { ignored: ['node_modules'] } }

πŸ“˜

Glob Matchers?

Not familiar with minimatch or micromatch? Check out the minimatch cheat sheet and test your patterns with globtester. Trust us, it's a much cleaner and easier way to write regexes for the file system : )

Any other option that you pass in will be attached directly to the webpack configuration object. This means that all documented webpack objects will work, as well as any configuration specified by webpack plugins. Just pass it in as an option!