Support multiple examples that want to use jsx transforms and webpack

[oveddan]

I'm attempting to create another react-three example, and want to use jsx. Right now, the webpack.examples.config file only support a single entry point, jsxtransform.jsx

It would be better to be able to configure multiple entry points, for other examples that use jsx.

It would also be better if the webpack dev server would automatically watch and reload the built jsx files when they're changed. Currently, they're only built when the server is started up (in the "predev") task

[Izzimach]

We can certainly add multiple entry points, but webpack will try to stick them all into one directory which probably isn't ideal. I guess a better solution would be to have a separate webpack config for each JSX example. This would also be a better match for the typical use/setup of webpack with an app that uses react-threee.

[oveddan]

I don't see anything wrong with putting them in a single directory. The "built" files could be put in /examples/build and the html pages could reference those by relative path.

The typical application that uses webpack (not just limited to react-three), but has multiple applications or sections uses different entry points. See the example here

This way you just have one command to run: npm run build-examples - and don't need to maintain multiple webpack configuration files. Imagine if you had 5 examples that want to use webpack - you'd need 5 different webpack configuration files. It's much easier to just add an entry.

I'd envision the webpack.examples.config for this project looking like:

var path = require('path');
var _ = require('lodash');

// copy most settings from the default config, and then modify
// the stuff that has changed

var defaultconfig = require('./webpack.config.js');
var examplesconfig = _.cloneDeep(defaultconfig);

examplesconfig.entry: {
        jsxtransform: path.join(__dirname, "examples", "jsxtransform", "jsxtransform.jsx"),
        example2: path.join(__dirname, 'examples', 'example2', 'example2.jsx'),
        example3: path.join(__dirname, 'examples', 'example2', 'example3.jsx'),
}

examplesconfig.output = {
    path: path.join(__dirname, "examples/build"),
    filename: "[name].js",
    publicPath: "/examples/build/"
};

// add a jsx processor
examplesconfig.module.loaders.push(
  {
    test: /\.jsx$/,
    loader: 'babel',
    include: path.join(__dirname, 'examples', 'jsxtransform')
  }
);

module.exports = examplesconfig;

I'm dying to add some really cool examples to this repository - such as examples that use glsl open gl shader code. The easiest way to do this is using the webpack raw loader, to load glsl code as a string. I'd love to make this above enhancement to enable me to do this :)

[oveddan]

Another possible solution - only one webpack.examples.config.js file, with a single entry point, but that entry point determined by an environment variable.

So you could run: ENTRY='example1/example1.js' npm run build-example and it would use that as the entry point as well as figure out which directory the output belongs to

[Izzimach]

Seems like dumping all the build artifacts into /examples/build or whatever is the better option. That also lets webpack watch all the examples at once, as you said.

[Izzimach]

Should be set up now.

[oveddan]

@Izzimach Thank you!!