Allow webpack loaders for relative imports

[redallen]

I need to use a custom webpack loader for a relative import, and I didn't want to create aliases to every path.

[ChristopherBiscardi]

Can you provide examples of the inline webpack requires this change is meant to support?

[redallen]

Sure:

• import RawExample from '!!raw-loader!./examples/SimpleBackgroundImage.js';
• import Example from 'babel-loader!@mdx-js/loader!./relative/path/mdxFile.mdx';

[ChristopherBiscardi]

import Example from 'babel-loader!@mdx-js/loader!./relative/path/mdxFile.mdx';

This seems like an unnecessary use of the mdx loader. gatsby-mdx already includes support for loading .mdx files.

The raw-loader for examples makes a lot of sense though.

[redallen]

Yeah, the raw loader example is primarily what I want to use it for. I just mean to say that you can use it to specify any loaders. What do I need to do to get it merged?

[ChristopherBiscardi]

What do I need to do to get it merged?

I'm mostly interested in why this isn't an import from a webpack package since webpack must already have code to do the parsing of these require strings and likely has a function to deal with it that we could use which would keep us much more compatible.

[dgutride]

@ChristopherBiscardi - this is a valid use case for us as well - we need the raw-loader defined in an import string because the js files are imported for use by react (as components) and the raw text is imported to display to users so they can use the same code in their application. When using the same content two times, we need to import separately within the files.

[redallen]

I've searched Webpack for a function for the past few hours, and they don't seem to have a (single) one. Webpack creates "local modules" and has many helper functions lying around to parse resource paths to create and then use these local modules. I've spent a while looking at helpers like webpack/lib/dependencies/LocalModulesHelpers, webpack/lib/ModuleFilenameHelpers and webpack/lib/util/identifier, but none of them seem to do exactly what we want (path.resolve and then path.relative(path.join, ..)). Better Webpack adoption is certainly possible, but it's outside the scope of what I'm able to do, sorry!

However, from looking around at their many string parsing functions, I've made a solution that is more readable and like theirs. Please give it a look.

[ChristopherBiscardi]

thanks @redallen! merged this in. it'll get built into the ci tag shortly so you can test it out.

[redallen]

I'm afraid I don't see it on npm, is there another registry you publish to?

[ChristopherBiscardi]

Looks like the ci publishing was borked. I published a new stable at 0.6.3