Doesn't write SVG sprite to disk

[jodelamo]

I might be missing something obvious here, but for me, the plugin never emits the actual sprite.

The output:

                                                 Asset     Size  Chunks             Chunk Names
/Users/jorum/Dev/project/src/assets/img/svg-sprite.svg  39.9 kB          [emitted]
                                                app.js   520 kB       0  [emitted]  app

Using this configuration:

new SvgStore(path.join(sourcePath, 'assets/img/icons/**/*.svg'), path.join(sourcePath, 'assets/img'), {
  name: 'svg-sprite.svg',
  chunk: 'app'
})

Is this a bug or am I just doing something wrong?

[mrsum]

@jlowgren could you try next code:

new SvgStore(path.join(sourcePath, 'assets/img/icons/**/*.svg'), 'assets/img'), {
  name: 'svg-sprite.svg',
  chunk: 'app'
});

[jodelamo]

Tried it, still nothing I'm afraid.

[mrsum]

@jlowgren what kind of task you've run? wepback or webpack-dev-server?

[jodelamo]

Just webpack --watch.

[lgordey]

@jlowgren What output publicPath do you have?

The destination path = publicPath + realtive path to dir

[jodelamo]

publicPath is unset, so whichever is the default.

[lgordey]

Default is / now.

It works without publicPath but with path. I suppose output.path is unset too?

[jodelamo]

path is set to path.join(__dirname, 'build');.

Here's a slightly trimmed down version of the whole configuration:

'use strict';

const path = require('path');
const webpack = require('webpack');
const SvgStore = require('webpack-svgstore-plugin');

const sourcePath = path.join(__dirname, 'src');
const buildPath = path.join(__dirname, 'build');

module.exports = {
  entry: {
    'app': path.join(sourcePath, '/assets/js/app.js')
  },
  devtool: 'source-map',
  debug: true,
  output: {
    filename: '[name].js',
    path: buildPath
  },
  resolve: {
    root: sourcePath
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: [ sourcePath ],
        loader: 'babel-loader?cacheDirectory',
      }
    ]
  },
  plugins: [
    new SvgStore(path.join(sourcePath, 'assets', 'img', 'icons', '**/*.svg'), 'assets/img', {
      name: 'svg-sprite.svg',
      chunk: 'app'
    })
  ]
};

[jodelamo]

Interestingly, if I set the SvgStore destination directory to something that doesn't exist, the directory is created, but the sprite itself is still missing.

[lgordey]

I made an example with your config, hope this helps. Take a look - https://github.com/lgordey/webpack-svgstore-plugin/tree/feature/example Clone it on feature/example branch and run npm run build

[jodelamo]

Thanks! I'll take a look at it during the day.

[jodelamo]

~/Dev/webpack-svgstore-plugin feature/example
❯ npm run build

> webpack-svgstore-plugin@2.0.7 build /Users/jorum/Dev/webpack-svgstore-plugin
> rm -rf example/build/* && NODE_ENV=example webpack --progress -p --colors

Hash: 396693bd3acecea9826e
Version: webpack 1.12.9
Time: 330ms
                    Asset     Size  Chunks             Chunk Names
assets/img/svg-sprite.svg  19.4 kB          [emitted]
                   app.js  1.08 kB       0  [emitted]  app
   [0] ./example/src/assets/js/app.js 22 bytes {0} [built]

Output appears identical but this time it really did write the file, so it must be something else on my end. I'll take another look and come back here if I find something, but you can probably close this for now. :)

Thanks for helping!

[eriolo]

@jlowgren did you find what was causing the problem? I have the exact same issue with not being able to write the sprite to disk.

[jodelamo]

@eriolo Unfortunately not. I resorted to building an SVG sprite without the help of webpack.