Webpack 4 / MiniCssExtractPlugin issue

[eglaost]

Is this a bug?

In production mode html markup works fine but css file prints -> background: url(path/from/disk/to/file/mysvg.svg).

It supposed to print: "sprite-467f4d.svg#mysvgid".

In dev mode where i don't use MiniCssExtractPlugin the console log prints the correct url.

Git: https://github.com/eglaost/webpack-boilerplate

• Node.js version: 8.11.1
• webpack version: 4.15.1
• svg-sprite-loader version: 3.8.0
• OS type & version: Win 10

[vortizhe]

Same here.

[vortizhe]

I try to use 3 css extractors with Webpack 4 with the same results:

• extract-css-chunks-webpack-plugin
• mini-css-extract-plugin
• extract-loader + file-loader

I saw on plugin code it's using optimizeExtractedChunks to hook into extract-text-webpack-plugin to replace the modules so that extractor is the only one who works but is deprecated on Webpack 4.

Maybe the plugin initialization from from the svg loader isn't good approach. It'll be possible to initialize inside css/sass loader chain?.

[vicvinc]

here I come...

@vortizhe

It should be in the file loader chain. because background images were all in file loader chain, and think about fonts, they are the same.

[vicvinc]

and if I put the publicPath in SVG-sprite-loader, the SVG path which is been used become 'publicPath/path/to/SVG'.

seems that sprite file name was replaced by the mini-css-extract-plugin.

[vicvinc]

@kisenka

hi, it's me again.

here Is the same repo, and when building with mini-css-extract-plugin the sprite URL was replaced with the real file path.

just use yarn build:production and you will see it.

here is the result:

hope helps.

[kisenka]

Hey! I'am planning to deprecate and remove extract mode from svg-sprite-loader. To replace it I wrote separate plugin which perform SVG extracting only – extract-svg-sprite-webpack-plugin. Webpack 3 and 4 are supported. It's under heavy development and I suggest you to take part in beta-testing of it. I love my users and want to make them happy! :)

[kisenka]

@vicvinc @vortizhe @eglaost and, of course, I need your feedback, if something going wrong with this plugin.

[vicvinc]

@kisenka me, troublemaker is glad to try this. got any situation will be feedback ASAP.

[dko-slapdash]

@kisenka, thanks for you work!

I'am planning to deprecate and remove extract mode from svg-sprite-loader. To replace it I wrote separate plugin which perform SVG extracting only – extract-svg-sprite-webpack-plugin

Could you please elaborate?

1. If extract mode is removed from svg-sprite-loader, what else remains there? I thought it's the main usecase? Does it mean that svg-sprite-loader is going to be deprecated entirely?
2. Do you recommend to completely switch to extract-svg-sprite-webpack-plugin? I'm asking, because Its weekly downloads counter looks low at npmjs, also there are some bugs (e.g. this PR which fixes a typo is not merged since August: https://github.com/JetBrains/svg-mixer/pull/69/files, also this issue https://github.com/JetBrains/svg-mixer/issues/59 is the 1st thing I see when I try using extract-svg-sprite-webpack-plugin by doing "import i from ".../xyz.svg").

[CodeLittlePrince]

@kisenka

hi, it's me again.

here Is the same repo, and when building with mini-css-extract-plugin the sprite URL was replaced with the real file path.

just use yarn build:production and you will see it.

here is the result:

hope helps.

Same to you. And did you found the solution finally?

[kush1960]

@kisenka, thanks for you work!

I'am planning to deprecate and remove extract mode from svg-sprite-loader. To replace it I wrote separate plugin which perform SVG extracting only – extract-svg-sprite-webpack-plugin

Could you please elaborate?

1. If extract mode is removed from svg-sprite-loader, what else remains there? I thought it's the main usecase? Does it mean that svg-sprite-loader is going to be deprecated entirely?
2. Do you recommend to completely switch to extract-svg-sprite-webpack-plugin? I'm asking, because Its weekly downloads counter looks low at npmjs, also there are some bugs (e.g. this PR which fixes a typo is not merged since August: https://github.com/JetBrains/svg-mixer/pull/69/files, also this issue JetBrains/svg-mixer#59 is the 1st thing I see when I try using extract-svg-sprite-webpack-plugin by doing "import i from ".../xyz.svg").

I can't answer all of that, but I removed this plugin an switched to extract-svg-sprite-webpack-plugin and everything now works perfectly

[KingSora]

Wrote a fix for Webpack 5, so in case you stumble upon this issue or you need inspiration for the fix: https://github.com/JetBrains/svg-sprite-loader/issues/465#issuecomment-990993090