[Question]Inject sprite to html after compile?

[borm]

Subj

[cascornelissen]

In what way? Are you using something like html-webpack-plugin?

[borm]

yes

[cascornelissen]

The generated spritemap ends up in the webpack assets with a chunk name, this should allow you to target it when using a custom template, see this example for more info.

[borm]

Don`t understand, where chunk output how i should require it

<%= require('html-loader!../spritemap') %>

[cascornelissen]

@borm, read the docs for html-webpack-plugin, it's in there, I don't really use it myself so I can't really help you. It's possible to target files or custom options in an .ejs file like this:

<% htmlWebpackPlugin.files %>

It should also be possible to get the source content of a file/asset via the compile.assets[] array and the source() function:

<%= compilation.assets[??].source() %>

[borm]

new SVGSpritemapPlugin({
      src: ['src/icons/*.svg', 'src/icons/flags/*.svg'],
      filename: 'dist/sprite.svg',
      prefix: 'icon-',
      chunk: 'spritemap',
      deleteChunk: false,
      styles: path.join(__dirname, 'src/_sprites.scss'),
    }),

<pre>
  <%= JSON.stringify(htmlWebpackPlugin.files, 0, 2) %>
</pre>

output

{
--
  | "publicPath": "",
  | "chunks": {
  | "vendors~app": {
  | "size": 1763912,
  | "entry": "dist/vendors~app.js",
  | "hash": "e5ac2dc6a01f80ebfe1b",
  | "css": [
  | "dist/vendors~app.css"
  | ]
  | },
  | "app": {
  | "size": 653824,
  | "entry": "dist/app.js",
  | "hash": "31d69e6c1451af924090",
  | "css": [
  | "dist/app.css"
  | ]
  | }
  | },
  | "js": [
  | "dist/vendors~app.js",
  | "dist/app.js"
  | ],
  | "css": [
  | "dist/vendors~app.css",
  | "dist/app.css"
  | ]
  | }

[cascornelissen]

@borm, can you also post the entire webpack output and the output of the following code in the ejs template?

<pre>
  <%= JSON.stringify(compilation.assets, 0, 2) %>
</pre>

[borm]

veeeeeery big output

[cascornelissen]

Haha, I would've guessed. You can add it as an attachment if you want to?

[borm]

r.txt

[borm]

ah, i see "spritemap.svg"

[borm]

as i understood i can use it <%= compilation.assets["spritemap.svg"]._value %>

[cascornelissen]

Yeah, you might want to try the .source() function, as variables prefixed with a _ are private by convention:

<%= compilation.assets["spritemap.svg"].source() %>

[borm]

but why it not exist inside htmlWebpackPlugin.files :(

[cascornelissen]

No idea why it doesn't show up when printing the array but if it works it works, right?

[borm]

yes

[borm]

Up, how get it in version 3.3.5

new SVGSpritemapPlugin('src/icons/!*.svg', {
      output: {
        filename: 'dist/sprite.svg',
        chunk: {
          name: 'spritemap',
          keep: true,
        },
      },
      sprite: {
        prefix: 'icon-',
        gutter: 8,
        generate: {
          title: false,
        },
      },
      styles: false,
    }),

<%= JSON.stringify(compilation.assets["dist/sprite.svg"], 0, 2) %> <%= JSON.stringify(compilation.assets["spritemap.svg"], 0, 2) %> <%= JSON.stringify(compilation.assets["spritemap"], 0, 2) %> Nothing printed

<%= JSON.stringify(htmlWebpackPlugin.files, 0, 2) %>

{
--
  | "publicPath": "",
  | "js": [
  | "dist/vendors~app.js",
  | "dist/app.js"
  | ],
  | "css": [
  | "dist/vendors~app.css",
  | "dist/app.css"
  | ]
  | }

[cascornelissen]

@borm, can you confirm that it works with 3.4.4? It might be related to changes made in #79.

[borm]

@cascornelissen maybe you mean 3.4.0?

don`t worked

[cascornelissen]

@borm, no I meant 3.3.4, sorry for the typo. The changes introduced by #79 were released in 3.3.5 so I was wondering if it was related to that. But also some more fixes were added and released in 3.3.6, 3.3.7 and 3.4.0. Can you also check the latest version if 3.3.4 works?

[borm]

3.3.4 works

sorry but 3.4.0 also works

Can you add this example https://github.com/borm/webpack-spritemap to examples?

[cascornelissen]

Looks like we were thinking the same thing, I've just added a minimal inline-html example to the repository. Great to hear it's working with 3.4.0 for you as well!