search

mrsum / webpack-svgstore-plugin

Simple svg-sprite creating with webpack
https://www.npmjs.com/package/webpack-svgstore-plugin
200 stars 92 forks source link

Use url as is when it starts from http #96

Closed max-mykhailenko closed 8 years ago

max-mykhailenko commented 8 years ago

Maybe code is ugly but it's allow to add webpack public path to filename dynamically like this:

const __svg__ = { path: '../../icons/frontend/*.svg', name: 'icons/sprite.svg' };
__svg__.filename = __webpack_public_path__ + __svg__.filename;
require('webpack-svgstore-plugin/src/helpers/svgxhr')(__svg__);

Default request was: http://rgb-lab.dev/icons/sprite.svg I need request to: http://rgb-lab.dev:3000/public/web/icons/sprite.svg My public path is: /public/web/ Before modifications and with using __webpack_public_path__ I have request to: http://rgb-lab.dev/http://rgb-lab.dev:3000/public/web/icons/sprite.svg

max-mykhailenko commented 8 years ago

I know that I something like this 

__svg__.filename = `public/web/${__svg__.filename}`;

but this solution will require my attention every time when I change public path

mrsum commented 8 years ago

@max-mykhailenko Hi, you can use https://github.com/webpack/docs/wiki/list-of-plugins#defineplugin for defining you public path or hostname

mrsum commented 8 years ago

And, actually you can override webpack-svgstore-plugin/src/helpers/svgxhr

max-mykhailenko commented 8 years ago

I can't add port as part of __svg__.filename, you add slashes and I got http://rgb-lab.dev/:3000/public/web/icons/sprite.svg

mrsum commented 8 years ago

All paths is relative publicPath

require('webpack-svgstore-plugin/src/helpers/svgxhr')({
  filename: 'http://yourhostname:port/additional/path/' + __svg__.filename
});
max-mykhailenko commented 8 years ago

'http://yourhostname:port/additional/path/' — it's dynamic part and I can't set it static.

mrsum commented 8 years ago

@max-mykhailenko is host depends by environment? or build/hash number? Can you explain your problem more detail?

max-mykhailenko commented 8 years ago

Page url and port aren't static. Several examples: Production: http://site.com Dev: site url http://site.dev, express server url for hot reloading http://site.dev:3000 Dev with sharing url: site url http://192.168.1.10, express server url for hot reloading http://192.168.1.10:3000

In webpack DefinePlugin I can define variable for dev and production related to NODE.ENV, but I can't check url.

I want to dynamically write url and port to filename ilke this url+port+publicPath+svg.filename