title: Include assets from webpack bundled npm package
body: <p>I've been banging my head over this for a while, and am wondering if it's even possible to begin with. Thanks for any help with this!</p>
  
  <h2>The npm package</h2>
  
  <p>I've got an npm package which is basically a library of React components. This library has embedded stylesheets, which references assets like fonts and images from the CSS. These are then all bundled using webpack into <code>my-package.js</code>.</p>
  
  <p>The config for this looks like:</p>
  
  <pre><code>var path = require('path');
  
  module.exports = {
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: ['babel-loader'],
          exclude: /node_modules/
        },
        {
          test: /\.css$/,
          loader: "style-loader!css-loader"
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
          loader: 'file-loader'
        },
        {
          test: /\.styl$/,
          loader: 'style-loader!css-loader!stylus-loader'
        }
      ]
    },
    entry: [
      './lib/components/index.js',
      './lib/index.styl'
    ],
    output: {
      path: path.join(__dirname, 'build/'),
      filename: 'my-package.js'
    }
  }
  </code></pre>
  
  <p>With <code>./lib/components/index.js</code> looking like:</p>
  
  <pre><code>import '../index.styl';
  import MyComponent from './my-component.js';
  
  export {
    MyComponent
  }
  </code></pre>
  
  <p>So far, so good.</p>
  
  <h2>The application</h2>
  
  <p>Now in another code base I've got the main application, which install this npm package. </p>
  
  <p>My application root requires this package...</p>
  
  <pre><code>import MyPackage from 'my-package';
  </code></pre>
  
  <p>And is then itself webpack bundled and loaded onto the browser. All the scripts and style blocks are bundled correctly, however the styles which reference the assets are using the relative url from the npm package itself, therefore giving me 404s from the application. </p>
  
  <p><a href="http://i.stack.imgur.com/tVVjZ.png" rel="noreferrer">console errs</a></p>
  
  <p>Is there any way to tell webpack to resolve these images from <code>node_modules/my-package/build/[webpack-generated-name].jpg</code> ?</p>
  
  <p>My application's webpack config looks like this:</p>
  
  <pre><code>var path = require('path'),
      webpack = require('webpack');
  
  module.exports = {
    devtool: '#eval-source-map',
    entry: [
      'my-package',
      'webpack/hot/only-dev-server',
      './app/index.js',
    ],
    output: {
      path: path.join(__dirname, 'build/static'),
      filename: 'bundled.js',
      publicPath: '/',
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    resolve: {
      extensions: ['', '.js']
    },
    resolveLoader: {
      'fallback': path.join(__dirname, 'node_modules')
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loaders: ['react-hot', 'babel'],
          exclude: /node_modules/,
          include: __dirname
        },
        {
          test: /\.css?$/,
          loader: "style-loader!css-loader",
          include: __dirname
        },
        {
          test: /\.(jpg|jpeg|ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
          loader: 'file-loader'
        },
        {
          test: /\.styl$/,
          loader: 'style-loader!css-loader!stylus-loader'
        }
      ]
    }
  };
  </code></pre>