Add a WebM and MP4 loader to the default Webpack config

[jaydenseric]

HTML5 videos are mainstream now, I find myself using videos every project.

[jaydenseric]

I can't work out how to extend the default config to get this working in the mean time. Having little experience with webpack-isomorphic-tools this is what I have attempted...

Within my project, in config/universal-redux.config.js:

module.exports = {
  webpack: {
    config: {
      module: {
        loaders: [{
          test: /\.(webm|mp4)$/,
          loader: 'file'
        }]
      }
    }
  }
}

In config/webpack-isomorphic-tools.config.js:

const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin')

module.exports = {
  assets: {
    videos: {
      extensions: ['webm', 'mp4'],
      parser: WebpackIsomorphicToolsPlugin.url_loader_parser
    }
  }
}

None of the videos make it in to the webpack-assets.json file, resulting in SyntaxError: /path/to/video.webm: Unexpected character type errors when attempting to start the dev server. The Webpack config seems ok, I can't work out how to get the webpack-isomorphic-tools config working.

[jaydenseric]

After spending 5 hours on this, what seems to work is adding toolsConfigPath to config/universal-redux.config.js:

module.exports = {
  toolsConfigPath: __dirname + '/webpack-isomorphic-tools.config.js',
  webpack: {
    config: {
      module: {
        loaders: [{
          test: /\.(webm|mp4)$/,
          loader: 'file'
        }]
      }
    }
  }
}

I don't know why this is necessary because that line already exists in the defaults being extended.

[bdefore]

@jaydenseric this is because __dirname relative to the default universal-redux.config.js is in your-project/node_modules/universal-redux/config and loaded the default webpack-isomorphic-tools.config rather than the custom one you were expecting in your-project/config.

That said, I agree that video is a common use case and I see no harm in adding this to both default configurations. Should this also accept any other video extensions?

[bdefore]

@jaydenseric I've added your suggestions with webm and mp4 to the default configuration. This has been released with 3.0.0-rc25. You should no longer need your custom configuration. Please re-open if you think there should be more extensions included by default.

[jaydenseric]

Greate! Upgraded, removed the video config and everything works.

Another video format is .ogv, but it's best practice these days to just use .webm and .mp4. I can't wait for the day IE and Safari handle WebM so we can finally work with a single format.

Would it be possible to allow configuring the webpack-isomorphic-tools config from within the universal-redux.config.js file, as with the Webpack config? If not, it might be good to document that you must setup toolsConfigPath for the custom config file to be noticed. Or even better, have the file automatically recognized when placed in config/, as with universal-redux.config.js. I'm still not sure reading the documentation and looking at the examples if a config/webpack.config.js gets recognized.

Thanks for all your hard work on this project! Seriously great stuff.

[bdefore]

@jaydenseric A good point that. Currently universal-redux.config.js is picked up automatically while the other two are not (and require configuration via a path in toolsConfigPath and webpack objects respectively). There is currently no ability to configure a project to use an external webpack config file. If you would like either of these, please file an issues so that I can keep track.