title: Integrating with webpack-isomorphic-tools
body: <p>I'm trying to develop a react isomorphic app, and i've recently came up with the <code>webpack-isomorphic-tools</code> npm package.<br>
  I've tried to follow the documentation but unfortunately the images and style files doesn't get recognized, and not added to the <code>webpack-assets.json</code> file.</p>
  
  <p>Up until now I've used this method:</p>
  
  <pre><code>if(process.env.BROWSER){
    include('./style.scss');
  }
  </code></pre>
  
  <p>But I understood webpack-isomorphic-tools is more beneficial.  </p>
  
  <p>for scss and other style files this is the error i get when running the server:</p>
  
  <pre><code>[webpack-isomorphic-tools] [debug]  requiring ./shared/Root.scss
  [webpack-isomorphic-tools] [error] asset not found: ./shared/Root.scss
  </code></pre>
  
  <p>for image files no errors are shown during the build, since no images are detected on the build. here is the <code>webpack-assets.js</code>:  </p>
  
  <pre><code>{
    "javascript": {
      "main": "/build/bundle.js"
    },
    "styles": {},
    "assets": {}
  }
  </code></pre>
  
  <p>Relevant code:<br>
  <strong>webpack-isomorphic-tools-config.js:</strong></p>
  
  <pre><code>var webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin');
  
  module.exports = 
  {
      debug: true,
      webpack_assets_file_path : 'public/build/webpack-assets.json',
      webpack_stats_file_path  : 'public/build/webpack-stats.json',
  
    assets:
    {
      images:
      {
        extensions: ['png', 'jpg', 'gif', 'ico', 'svg']
      },
          fonts:
          {
              extensions: ['woff', 'woff2', 'eot', 'ttf']
          },
          styles:
          {
              extensions: ['scss', 'less', 'css'],
              filter(module, regular_expression, options, log)
              {
                  if (options.development)
                  {
                      // In development mode there's Webpack "style-loader",
                      // which outputs `module`s with `module.name == asset_path`,
                      // but those `module`s do not contain CSS text.
                      //
                      // The `module`s containing CSS text are 
                      // the ones loaded with Webpack "css-loader".
                      // (which have kinda weird `module.name`)
                      //
                      // Therefore using a non-default `filter` function here.
                      //
                      return webpack_isomorphic_tools_plugin.style_loader_filter(module, regular_expression, options, log)
                  }
  
                  // In production mode there will be no CSS text at all
                  // because all styles will be extracted by Webpack Extract Text Plugin
                  // into a .css file (as per Webpack configuration).
                  //
                  // Therefore in production mode `filter` function always returns non-`true`.
              },
  
              // How to correctly transform kinda weird `module.name`
              // of the `module` created by Webpack "css-loader" 
              // into the correct asset path:
              path: webpack_isomorphic_tools_plugin.style_loader_path_extractor,
  
              // How to extract these Webpack `module`s' javascript `source` code.
              // Basically takes `module.source` and modifies its `module.exports` a little.
              parser: webpack_isomorphic_tools_plugin.css_loader_parser
          }
    }
  }
  </code></pre>
  
  <p><strong>index.js</strong> (looks a lot like the one in the documentation):</p>
  
  <pre><code>'use strict';
  var path = require('path');
  require('babel-register');
  require('babel-polyfill');
  
  require('app-module-path').addPath(path.join(__dirname,'shared'));
  
  global._development_ = false
  if (process.env.NODE_ENV !== 'production'){
      global._development_ = true;
  }
  
  var Webpack_isomorphic_tools = require('webpack-isomorphic-tools');
  
  // this must be equal to your Webpack configuration "context" parameter 
  var project_base_path = path.resolve(__dirname);
  
  // this global variable will be used later in express middleware 
  global.webpack_isomorphic_tools = new Webpack_isomorphic_tools(require('./webpack-isomorphic-tools-config'))
  // enter development mode if needed  
  // (you may also prefer to use a Webpack DefinePlugin variable) 
  .development(!(process.env.NODE_ENV === 'production'))
  // initializes a server-side instance of webpack-isomorphic-tools 
  // (the first parameter is the base path for your project 
  //  and is equal to the "context" parameter of you Webpack configuration) 
  // (if you prefer Promises over callbacks  
  //  you can omit the callback parameter 
  //  and then it will return a Promise instead) 
  .server(project_base_path, function()
  {
    // webpack-isomorphic-tools is all set now. 
    // here goes all your web application code: 
    // (it must reside in a separate *.js file  
    //  in order for the whole thing to work) 
    require('./server/server')
  });
  </code></pre>
  
  <p><strong>webpack.dev.js</strong> (webpack-dev-server config):</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  var Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin')
  
  var webpack_isomorphic_tools_plugin = 
    // webpack-isomorphic-tools settings reside in a separate .js file  
    // (because they will be used in the web server code too). 
    new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-config'))
    // also enter development mode since it's a development webpack configuration 
    // (see below for explanation) 
    .development();
  
  
  module.exports = {
      context: __dirname,
    entry: ['webpack-dev-server/client?http://127.0.0.1:8080/',
            'webpack/hot/only-dev-server',
            './client/index.jsx'],
    resolve: {
      modulesDirectories: ['node_modules', 'shared'],
      extensions:         ['', '.js', '.jsx']
    },
    output: {
      path: path.join(__dirname, 'public', 'build'),
      filename: 'bundle.js',
          publicPath: "/build/"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loaders: ['react-hot', 'babel']
        },
              {
                  test: /\.css$/,
                  loader: "style-loader!css-loader!autoprefixer-loader"
              },
              {
                  test: /\.less$/,
                  loader: "style-loader!css-loader!autoprefixer-loader!less-loader"
              },
              {
                  test: /\.scss$/,
                  loader: "style-loader!css-loader!autoprefixer-loader!sass-loader"
              },
              { 
                  test: webpack_isomorphic_tools_plugin.regular_expressions['images'],
                  loader: "url-loader?limit=10240" 
              },
              { 
                  test: webpack_isomorphic_tools_plugin.regular_expression['fonts'],
                  loader: "url-loader?limit=10240"
              }
      ]
    },
    plugins: [
          new webpack.DefinePlugin({
              "process.env": {
          BROWSER: JSON.stringify(true),
                  NODE_ENV: JSON.stringify( process.env.NODE_ENV || 'development' )
          }
          }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
          webpack_isomorphic_tools_plugin
    ],
    devtool: 'inline-source-map',
    devServer: {
      hot: true,
      proxy: {
        '*': 'http://127.0.0.1:' + (process.env.PORT || 3000)
      },
      host: '127.0.0.1'
    }
  };
  </code></pre>
  
  <p><strong>webpack.config.js</strong>:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  var ExtractTextPlugin = require("extract-text-webpack-plugin");
  
  var Webpack_isomorphic_tools_plugin = require('webpack-isomorphic-tools/plugin')
  
  var webpack_isomorphic_tools_plugin = 
    // webpack-isomorphic-tools settings reside in a separate .js file  
    // (because they will be used in the web server code too). 
    new Webpack_isomorphic_tools_plugin(require('./webpack-isomorphic-tools-config'));
  
  module.exports = {
      context: __dirname,
    entry: ['./client/index.jsx'],
    resolve: {
      modulesDirectories: ['node_modules', 'shared'],
      extensions:         ['', '.js', '.jsx']
    },
    output: {
      path: path.join(__dirname, 'public', 'build'),
      filename: 'bundle.js',
          publicPath: "/build"
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loaders: ['react-hot', 'babel']
        },
              {
                  test: /\.css$/,
                  loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader")
              },
              {
                  test: /\.less$/,
                  loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!less-loader")
              },
              {
                  test: /\.scss$/,
                  loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader!sass-loader")
              },
              { 
                  test: /\.gif$/, loader: "url-loader?limit=10000&amp;mimetype=image/gif" 
              },
              { 
                  test: /\.jpg$/, loader: "url-loader?limit=10000&amp;mimetype=image/jpg" 
              },
              {
                  test: /\.png$/, loader: "url-loader?limit=10000&amp;mimetype=image/png" 
              },
              {
                  test: /\.svg/, loader: "url-loader?limit=26000&amp;mimetype=image/svg+xml" 
              },
              { 
                  test: /\.(woff|woff2|ttf|eot)/, loader: "url-loader?limit=1&amp;name=/[hash].[ext]" 
              }
      ]
    },
    plugins: [
          new webpack.DefinePlugin({
              "process.env": {
          BROWSER: JSON.stringify(true),
                  NODE_ENV: JSON.stringify( process.env.NODE_ENV || 'development' )
          }
          }),
          new ExtractTextPlugin("bundle.css")
      ]
  };
  </code></pre>
  
  <p>If more code is required, I'd be happy to give it, thanks!</p>