title: Webpack bundling custom Utilities separately from App code
body: <p>I would like to bundle up my TypeScript ReactJs project using webpack. As my project is rather large, I want to bundle the utils separately from the main App code, so I can keep them separate.</p>
  
  <p>I have the following folder structure;</p>
  
  <pre><code>Scripts
      - App
          - Components
              - ComponentOne.tsx
          - App.tsx
      - Utilities
          - Interfaces
              - IHelperInterface.ts
          - Interfaces.ts
  </code></pre>
  
  <p><code>ComponentOne</code> imports <code>IHelperInterface</code> with a an import statement <code>import { IHelperInterface } from '../../Utilities/Interfaces/IHelperInterface';</code></p>
  
  <p>Along with my custom Utils, I am also using npm for various packages.</p>
  
  <p>So my current webpack config looks like this;</p>
  
  <pre><code>var webpack = require('webpack'),
      pkg = require('./package.json');
  
  module.exports = {
      entry: {
          app: './scripts/app/app',
          vendor: Object.keys(pkg.dependencies)
      },
  
      output: {
          filename: '[name].bundle.js',
          path: __dirname + '/wwwroot/js/app'
      },
  
      plugins: [
          new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' })
      ],
  
      // Enable sourcemaps for debugging webpack's output.
      devtool: 'source-map',
  
      resolve: {
          // Add '.ts' and '.tsx' as resolvable extensions.
          extensions: ['.ts', '.tsx', '.js', '.json']
      },
  
      module: {
          rules: [
              // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
              { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
  
              // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
              { enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' }
          ]
      }
  };
  </code></pre>
  
  <p>My vendor files (npm packages) are being bundled together, and currently the rest is then bundled into 1 file. How can I modify the config to bundle my Utils? </p>
  
  <p>I tried adding a 2nd entry point;</p>
  
  <pre><code>entry: {
      app: './scripts/app/app',
      utils: './scripts/interfaces',
      vendor: Object.keys(pkg.dependencies)
  },
  </code></pre>
  
  <p>In the hope that this would work, however it created <code>utils.bundle.js</code> file, but the <code>app.bundle.js</code> file still had all the code in it.</p>