包含来自webpack捆绑的npm软件包的资产 [英] Include assets from webpack bundled npm package

问题描述

我已经为此花了好一会儿，想知道是否有可能从头开始.感谢您对此的任何帮助！

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!

我有一个npm包，它基本上是一个React组件库.该库具有嵌入的样式表，该样式表引用了CSS中的资源，例如字体和图像.然后将所有这些都使用webpack捆绑到my-package.js.

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 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软件包.

Now in another code base I've got the main application, which install this npm package.

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

My application root requires this package...

import MyPackage from 'my-package';

然后将其本身打包成Webpack并加载到浏览器中.所有脚本和样式块均已正确捆绑，但是引用资产的样式使用的是npm软件包本身的相对URL，因此从应用程序中获得了404.

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.

控制台错误

有什么办法告诉webpack解析node_modules/my-package/build/[webpack-generated-name].jpg中的这些图像吗?

Is there any way to tell webpack to resolve these images from node_modules/my-package/build/[webpack-generated-name].jpg ?

我的应用程序的webpack配置如下:

My application's webpack config looks like this:

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

推荐答案

找到了解决此问题的方法.

Figured out a way around this.

在应用程序的webpack配置中，我添加了一个插件(@Interrobang推荐)，该插件将node_module/my-package中的静态资产复制到应用程序服务器的公共路径中:

In my application's webpack config I added a plugin (recommended by @Interrobang) which copies the static assets from the node_module/my-package into the app server's public path:

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.

These will then be made accessible by calling the asset name: localhost:XXXX/my-image.jpg. The server here is basically looking at /my/public/my-image.jpg if you've set it up correctly.

我正在使用Express，因此只需要在应用服务器中定义app.use(express.static('my/public')).

I'm using Express, so I just had to define app.use(express.static('my/public')) in my app server.

这篇关于包含来自webpack捆绑的npm软件包的资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！