svg-sprite-loader

svg-sprite-loader copied to clipboard

Hi! I can integrate svg sprite loader with Webpack 4 but i can't integrate with CRA.

What is the current behavior?

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration.entry should be one of these: object { : non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function -> The entry point(s) of the compilation. Details:

  • configuration.entry['sprite'] should be a string. -> The string is resolved to a module which is loaded upon startup.
  • configuration.entry['sprite'] should not be empty.
  • configuration.entry should be a string. -> An entry point without name. The string is resolved to a module which is loaded upon startup.
  • configuration.entry should be an array: [non-empty string]
  • configuration.entry should be an instance of function -> A Function returning an entry object, an entry string, an entry array or a promise to these things

What is the expected behavior?

Should not create a new bundle file with name sprite.js and create in folder assets file with name icons.svg filed SVG symbols.

If the current behavior is a bug, please provide the steps to reproduce, at least part of webpack config with loader configuration and piece of your code.

1. npm run eject
2. Install dependence

List:

const glob = require('glob');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const HtmlPlugin = require('html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');

1. Сonfigure webpack.config.dev.js

3.1 Edit entry points (convert array to object and add new entry point sprite)

entry: {
    index: [
      require.resolve('react-dev-utils/webpackHotDevClient'),
      paths.appIndexJs,
    ],
    sprite: glob.sync(path.resolve(__dirname, 'svg/*.svg'))
}

3.2 Add new rule for SVG files

{
  test: /\.svg$/,
  include: path.resolve(__dirname, 'svg'),
  use: [
    {
      loader: 'svg-sprite-loader',
      options: {
        extract: true,
        spriteFilename: 'assets/icons.svg'
      }
    },
    'svg-transform-loader',
    'svgo-loader'
  ]
}

3.3 Edit plugins

Primarily edit HtmlWebpackPlugin add excludeAssets

new HtmlWebpackPlugin({
  inject: true,
  excludeAssets: [/sprite.*.js/], // Added
  template: paths.appHtml,
}),

And include SpriteLoaderPlugin

new SpriteLoaderPlugin({ plainSprite: true }),
{
  apply: compiler => {
    compiler.plugin('emit', (compilation, callback) => {
      const { assets } = compilation;
      const chunkToRemove = Object.keys(assets)
        .filter(chunk => chunk.match(/sprite.*\.js$/))
        .join('');
      delete compilation.assets[chunkToRemove];
      callback();
    });
  }
}

Please tell us about your environment:

• Node.js version: 10.11.0
• webpack version: 4.19.1
• svg-sprite-loader version: 4.1.3
• OS type & version: macOS 10.14.2