webpack需要相对图像

Hen*_*rik 21 javascript urlloader image-loading webpack

我有两个文件:

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

在target.js中:

<img src={require("../../../img/target.png")} />
Run Code Online (Sandbox Code Playgroud)

使用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' },
Run Code Online (Sandbox Code Playgroud)

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

现在,我使用react-router,所以我在/help/targets/target和webpack给图像这个路径/help/targets/[hash].png,其中哈希是一个sha1和.我更愿意,如果它给它的路径/[hash].png.只是

如何使webpack了解对于这个js文件,图像的文件路径是否与浏览器中的相同?

Hen*_*rik 19

诀窍是给webpack一个关于其路径基础的配置提示:

使用:

"output": { "publicPath": "/" }
Run Code Online (Sandbox Code Playgroud)

告诉webpack不要相对.

  • 祝福你.谢谢 (2认同)