Ich habe eine Weile mit dem Kopf darüber geschlagen und frage mich, ob es überhaupt möglich ist, damit anzufangen. Vielen Dank für jede Hilfe dabei!

Das npm-Paket

Ich habe ein npm-Paket, das im Grunde eine Bibliothek von React-Komponenten ist. Diese Bibliothek verfügt über eingebettete Stylesheets, die auf Elemente wie Schriftarten und Bilder aus dem CSS verweisen. Diese werden dann alle über das Webpack in @ gebündelmy-package.js.

Die Konfiguration dafür sieht so aus:

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

Mit./lib/components/index.js sieht aus wie

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

export {
  MyComponent
}

So weit, ist es gut

Die Anwendun

Jetzt in einer anderen Codebasis habe ich die Hauptanwendung, die dieses npm-Paket installiert.

Mein Anwendungsstamm benötigt dieses Paket ...

import MyPackage from 'my-package';

And wird dann selbst im Webpack gebündelt und in den Browser geladen. Alle Skripte und Stilblöcke sind korrekt gebündelt. Die Stile, die auf die Assets verweisen, verwenden jedoch die relative URL aus dem npm-Paket selbst und geben mir daher 404s aus der Anwendung.

console errs

Ist es möglich, Webpack anzuweisen, diese Bilder von @ aufzulösenode_modules/my-package/build/[webpack-generated-name].jpg ?

ie Webpack-Konfiguration meiner Anwendung sieht folgendermaßen aus:

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