webpack 需要相对图像

Question

我有两个文件：

./img/mypic.png
./js/help/targets/target.js

在target.js中：

<img src={require("../../../img/target.png")} />

与webpack.config.js:

 14   module: {
 15     loaders: [
 16       { test: /\.js$/, loader: 'jsx-loader?harmony' },
 17       { test: /\.css$/, loader: 'style-loader!css-loader' },
 18       { test: /\.(png|jpg|jpeg|gif|woff)$/, loader: 'url-loader?limit=8192' },

将图像编译成./[hash].png。

现在，我使用 react-router，所以我在 /help/targets/target 并且 webpack 为图像提供这条路径 /help/targets/[hash].png，其中哈希是 sha1 总和。如果它给它路径/[hash].png，我更愿意。刚刚

如何让 webpack 理解对于这个 js 文件，图像的文件路径是相对的，就像在浏览器中一样？

Answer 1

诀窍是给 webpack 一个配置提示，让它的路径基于什么：

使用：

"output": { "publicPath": "/" }

告诉webpack不要相对

webpack 需要相对图像

webpack require relative image

javascript

webpack

image-loading

urlloader