包含来自 webpack 捆绑的 npm 包的资产

Question

我一直在努力解决这个问题，并且想知道是否可以开始。感谢您对此的任何帮助！

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

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

console errs

有没有办法告诉 webpack 从node_modules/my-package/build/[webpack-generated-name].jpg 解析这些图像？

我的应用程序的 webpack 配置如下所示：

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

Answer 1

想出了一个解决办法。

在我的应用程序的 webpack 配置中，我添加了一个插件（由 @Interrobang 推荐），它将静态资产从 node_module/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'))。