title: Different main entry point in package.json for node and browser
body: <p>In isomorphic react app I have <strong><code>myModule</code></strong> which should behave differently on node and browser environments. I would like configure this split point in <code>package.json</code> for <code>myModule</code>:</p>
  
  <p><strong><code>package.json</code></strong></p>
  
  <pre><code>{
    "private": true,
    "name": "myModule",
    "main": "./myModule.server.js",
    "browser": "./myModule.client.js"
  }
  </code></pre>
  
  <p><strong><code>file structure</code></strong></p>
  
  <pre><code>├── myModule
  │   ├── myModule.client.js
  │   ├── myModule.server.js
  │   └── package.json
  │ 
  ├── browser.js
  └── server.js
  </code></pre>
  
  <p>So when I use <code>myModule</code> in <strong>node</strong> I should get only <code>myModule.server.js</code>:</p>
  
  <p><code>server.js</code></p>
  
  <pre><code>import myModule from './myModule';
  myModule(); // invoke myModule.server.js
  </code></pre>
  
  <p>On the <strong>browser</strong> side should <strong>build bundle only with</strong> <code>myModule.client.js</code>:</p>
  
  <p><code>browser.js</code></p>
  
  <pre><code>import myModule from './myModule';
  myModule(); // invoke myModule.client.js
  </code></pre>
  
  <p><a href="https://github.com/kriasoft/react-starter-kit/blob/master/src/core/fetch/package.json" rel="noreferrer">react-starter-kit</a> uses this approach but I can't figure out where is this configuration defined.</p>
  
  <hr>
  
  <h2>Motivation</h2>
  
  <ol>
  <li><code>package.json</code> is good semantic point to do this kind of splitting.</li>
  <li>Client side bundle only contain <code>myModule.client.js</code>.</li>
  </ol>
  
  <hr>
  
  <h2>Known solution - not an answer for me</h2>
  
  <p>You can have this kind of file structure:</p>
  
  <pre><code>├── myModule
  │    ├── myModule.client.js
  │    ├── myModule.server.js
  │    └── index.js           &lt;-- difference
  │ 
  ├── browser.js
  └── server.js
  </code></pre>
  
  <p>And in <code>index.js</code>:</p>
  
  <pre><code>if (process.browser) { // this condition can be different but you get the point
      module.exports = require('./myModule.client');
  } else {
      module.exports = require('./myModule.server');
  }
  </code></pre>
  
  <p>The main problem with this is that client bundle <strong>contains a lot of heavy kB backend code</strong>.</p>
  
  <hr>
  
  <h2>My webpack configuration</h2>
  
  <p>I include my <code>webpack.config.js</code>. Strangely this config always point to <code>myModule.client.js</code> for browser and node.</p>
  
  <pre><code>const webpack = require('webpack');
  var path = require('path');
  var fs = require('fs');
  
  const DEBUG = !process.argv.includes('--release');
  const VERBOSE = !process.argv.includes('--verbose');
  const AUTOPREFIXER_BROWSERS = [
      'Android 2.3',
      'Android &gt;= 4',
      'Chrome &gt;= 35',
      'Firefox &gt;= 31',
      'Explorer &gt;= 9',
      'iOS &gt;= 7',
      'Opera &gt;= 12',
      'Safari &gt;= 7.1',
  ];
  
  let nodeModules = {};
  fs.readdirSync('node_modules')
      .filter(function(x) {
          return ['.bin'].indexOf(x) === -1 ;
      })
      .forEach(function(mod) {
          nodeModules[mod] = 'commonjs ' + mod;
      });
  
  let loaders = [
      {
          exclude: /node_modules/,
          loader: 'babel'
      },
      {
          test: [/\.scss$/,/\.css$/],
          loaders: [
              'isomorphic-style-loader',
              `css-loader?${DEBUG ? 'sourceMap&amp;' : 'minimize&amp;'}modules&amp;localIdentName=` +
              `${DEBUG ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]'}`,
              'postcss-loader?parser=postcss-scss'
          ]
      },
      {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
          loader: 'url-loader',
          query: {
              name: DEBUG ? '[name].[ext]' : '[hash].[ext]',
              limit: 10000,
          },
      },
      {
          test: /\.(eot|ttf|wav|mp3)$/,
          loader: 'file-loader',
          query: {
              name: DEBUG ? '[name].[ext]' : '[hash].[ext]',
          },
      },
      {
          test: /\.json$/,
          loader: 'json-loader',
      },
  ];
  
  const common = {
      module: {
          loaders
      },
      plugins: [
          new webpack.optimize.OccurenceOrderPlugin(),
      ],
      postcss: function plugins(bundler) {
          var plugins = [
              require('postcss-import')({ addDependencyTo: bundler }),
              require('precss')(),
              require('autoprefixer')({ browsers: AUTOPREFIXER_BROWSERS }),
          ];
  
          return plugins;
      },
      resolve: {
          root: path.resolve(__dirname, 'src'),
          extensions: ['', '.js', '.jsx', '.json']
      }
  };
  
  
  module.exports = [
      Object.assign({} , common, { // client
          entry: [
              'babel-polyfill',
              './src/client.js'
          ],
          output: {
              path: __dirname + '/public/',
              filename: 'bundle.js'
          },
          target: 'web',
          node: {
              fs: 'empty',
          },
          devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
          plugins: [
              ...common.plugins,
              new webpack.DefinePlugin({'process.env.BROWSER': true }),
          ],
      }),
      Object.assign({} , common, { // server
          entry: [
              'babel-polyfill',
              './src/server.js'
          ],
          output: {
              path: __dirname + '',
              filename: 'server.js'
          },
          target: 'node',
          plugins: [
              ...common.plugins,
              new webpack.DefinePlugin({'process.env.BROWSER': false }),
          ],
          node: {
              console: false,
              global: false,
              process: false,
              Buffer: false,
              __filename: false,
              __dirname: false,
          },
          externals: nodeModules,
  
      })
  ];
  </code></pre>