Spike

Spike

A modern static build tool, powered by webpack

Get Started    Support

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 😀

Option
Description
Default

root

[required] An absolute path to the root of your project.

matchers

An 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'

reshape

A configuration object passed to reshape, mostly relevant for plugins for HTML processing.

{ plugins: [] }

postcss

An 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: [] }

babel

A configuration object for Babel for JS processing.

dumpDirs

An array of directories which, if direct children of the project root, will dump their contents to the root on compile.

['views', 'assets']

env

String representing the environment you would like to use when compiling. See Environments for more information about this option.

ignore

An array of micromatch strings, each one defining a file pattern to be ignored from compilation.

outputDir

The name or path of the folder your project will be compiled into, on top of the project's root.

public

cleanUrls

Remove .html from your paths during spike.watch.

true

vendor

A 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.

entry

Object directing to the js entry point, see webpack's documentation

{ 'js/main': ['./assets/js/index.js'] }

plugins

Array of webpack plugins, see webpack's documentation and spike's documentation for details

afterSpikePlugins

Array of webpack plugins that run after spike's core plugin, see webpack's documentation and spike's documentation for details

module.rules

Array of custom loaders, see webpack's documentation and spike's documentation for details

server

An 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!

App.js File