Javascript 包括Web包捆绑的npm包中的资产

我已经为这件事绞尽脑汁有一段时间了，我想知道是否有可能从一开始。谢谢你的帮助

npm包 我有一个npm包，它基本上是一个React组件库。该库具有嵌入式样式表，它引用CSS中的字体和图像等资产。然后使用webpack将这些文件打包到

my package.js

此文件的配置如下所示：

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

/lib/components/index.js

看起来像：

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

export {
  MyComponent
}

到目前为止，一切顺利

应用程序 现在在另一个代码库中，我得到了主应用程序，它安装了这个npm包

我的应用程序根目录需要此包

import MyPackage from 'my-package';

然后将其本身打包并加载到浏览器上。所有脚本和样式块都正确绑定，但是引用资产的样式使用的是npm包本身的相对url，因此应用程序提供404

有没有办法告诉webpack从

node\u modules/my package/build/[webpack generated name].jpg解析这些图像

我的应用程序的网页包配置如下所示：

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

想办法解决这个问题

在我的应用程序的webpack配置中，我添加了一个插件（由@Interrobang推荐），该插件将静态资产从
节点模块/my package
复制到应用程序服务器的公共路径中：

var TransferWebpackPlugin = require('transfer-webpack-plugin');

...
plugins: [
  new TransferWebpackPlugin([
    { from: 'node_modules/my-package/assets', to: path.join(__dirname, 'my/public') }
  ])
]
...

然后通过调用资产名：
localhost:XXXX/my image.jpg
可以访问这些文件。如果设置正确，这里的服务器基本上是在查看
/my/public/my image.jpg

我使用的是Express，所以我必须在我的应用服务器中定义
app.use（Express.static（'my/public'））
。
如果图像不是导入的或必需的，webpack将不会处理它们。你可能想要像“谢谢你”这样的东西。我对采用这种方法有点不确定，因为npm包中的webpack构建步骤似乎需要了解我的应用程序的公共路径。在我的应用程序的webpack配置中是否有任何选项可以在我复制资产后再次解析路径？明白了，将发布修复。谢谢@Interrobang！但是，如果您正在创建一个NPM模块，有人可能会将其拉入任意的web应用程序，那么这是否有效？假设他们的web应用程序最终是从服务器的根目录而不是根目录提供的，那么webpack如何解析到正确的绝对路径？