我已经为此花了好一会儿,想知道是否有可能从头开始。感谢您对此的任何帮助!
我有一个npm包,它基本上是一个React组件库。该库具有嵌入式样式表,该样式表引用了CSS中的资源,例如字体和图像。然后将所有这些都使用webpack捆绑到中my- package.js。
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看起来像:
./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。
控制台错误
有什么办法告诉webpack从中解析这些图像node_modules/my-package/build/[webpack-generated- name].jpg吗?
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' } ] } };
找出解决此问题的方法。
在应用程序的webpack配置中,我添加了一个插件(@Interrobang推荐),该插件将静态资产从中复制node_module/my- package到应用程序服务器的公共路径中:
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是否已正确设置。
localhost:XXXX/my-image.jpg
/my/public/my- image.jpg
我正在使用Express,因此只需要app.use(express.static('my/public'))在我的应用服务器中进行定义。
app.use(express.static('my/public'))