包含来自 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
}

到目前为止，一切都很好.

So far, so good.

现在在另一个代码库中，我有主应用程序，它安装了这个 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屋！