He estado golpeando mi cabeza sobre esto por un tiempo, y me pregunto si es posible comenzar. ¡Gracias por cualquier ayuda en esto!

El paquete npm

Tengo un paquete npm que es básicamente una biblioteca de componentes React. Esta biblioteca tiene hojas de estilo integradas, que hacen referencia a activos como fuentes e imágenes del CSS. Estos se agrupan usando webpack enmy-package.js.

La configuración para esto se ve así:

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'
  }
}

Con./lib/components/index.js pareciéndose a:

import '../index.styl';
import MyComponent from './my-component.js';

export {
  MyComponent
}

Hasta aquí todo bien.

La aplicación

Ahora en otra base de código tengo la aplicación principal, que instala este paquete npm.

La raíz de mi aplicación requiere este paquete ...

import MyPackage from 'my-package';

Y luego se incluye en el paquete web y se carga en el navegador. Todos los scripts y bloques de estilo están agrupados correctamente, sin embargo, los estilos que hacen referencia a los activos están utilizando la URL relativa del paquete npm en sí, por lo que me dan 404s de la aplicación.

la consola se equivoca

¿Hay alguna manera de decirle a webpack que resuelva estas imágenes desdenode_modules/my-package/build/[webpack-generated-name].jpg ?

La configuración del paquete web de mi aplicación se ve así:

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'
      }
    ]
  }
};