Whitelist page types + add image loader

[KyleAMathews]

Gatsby uses require.context from Webpack to require pages as modules from the /pages/ directory.

Previously to this PR, Gatsby would try to require everything inside pages which meant Webpack would throw an error when there was a file within /pages/ without a loader setup for it. A number of people ran into this.

So as a side-effect, this also meant Gatsby couldn't ship with image loaders as I had a number of sites with images in pages (these are copied to /public/ on build).

So this PR fixes both problems. Now there's a whitelist of file types that are treated as potential pages and it adds a default loader for images.

Fixes #208, #287, and #18

[KyleAMathews]

This will require a breaking release as it could conflict with existing webpack configs + requires installation of image-webpack-loader (if you want to use image loaders).

[marcelkalveram]

@KyleAMathews I've been looking through the linked issues from this PR but couldn't find a solution. Sorry if this has been answered elsewhere, but is there a simple way to say:

I don't want .json files to get rendered as pages, but just copy them as a plain file to the public folder? Right now, it seems that it's treating it as a page and doing weird things like converting it to a folder where it copies the other image assets. I'm running version 0.12.19.

Any help would be appreciated. I'm still trying to figure out how to properly configure and modify Webpack, and this particular issue seems to be impossible to solve with my current knowledge of Gatbsy internals.

[KyleAMathews]

@marcelkalveram this is something that needs clarified — there's a proposal to add a static folder where anything you put in there just gets copied over to the public directory on build. This is probably what you want. You can replicate that pretty easily with a bit of code right now though — checkout how this site does this https://github.com/britt/britt.github.com/blob/0cdce436ced01eef9b7a6688a4c874afa63bc69a/gatsby-node.js#L99

[monsieurnebo]

@KyleAMathews Is there any way to customize this whitelist?

I'm using styled-components with the following structure:

|- MyAmazingComponent
  |- MyAmazingComponent.jsx    // The React component view
  |- styles.js    // Related style (as styled-components)

Which is causing troubles when applyed to a page:

|- pages
  |- about
    |- index.jsx
    |- styles.js

Because Gatsby is trying to load styles.js as a page.

As a temporary fix, I'm currently declaring styled-components inside the page file, but I'm looking to only load .jsx files and be able to separate things.

I saw in the project's sources that an underscore would prevent the file to be loaded as a page. Is that a reliable feature ?

[KyleAMathews]

Most people put components in their own directory at src/components. But yes, you can also write js/jsx files in pages w/ an underscore at the front of their names which solve the same problem.

[monsieurnebo]

Indeed, my components are located in src/components, but there is some cases where a page need a specific style (via styled-components), while this specific style isn't enough for a new component.

Thanks for the confirmation about the underscore naming 👍