Webpack 3: How do I add options to a chained loader?

Question

// ...    
const webpack = require('webpack');

module.exports = function config(env, argv = {}) {
  return {
    // ...
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          include: APP_DIR,
          loader: ['babel-loader', 'eslint-loader'],
        },
        {
          test: /\.css$/,
          include: APP_DIR,
          loader: 'style-loader!css-loader',
        },
        {
          test: /\.scss$/,
          include: APP_DIR,
          loaders: [
            'style-loader',
            'css-loader', // <- is this the same thing as chaining?
            {
              loader: 'sass-loader', // <- is this the method?
              options: {
                implementation: dartSass,
              },
            },
          ],
        },
        {
          test: /\.svg$/,
          loader: 'babel-loader!react-svg-loader?' + JSON.stringify({ // <- this doesn't work
            options: {
              svgo: {
                plugins: [
                  { removeTitle: false }
                ],
              },
            },
          }),
        },
      ],
    },
  };
};

Edit: So what I need to do is to add

          options: {
            svgo: {
              plugins: [
                { removeTitle: false },
              ],
            },
          },

to react-svg-loader whilst keeping it chained

score 0 · Accepted Answer · answered Jul 04 '19 at 08:19

Ok seems like it works like in the docs.. I though it was webpack4 syntax only but apparently not.. by bad. https://www.npmjs.com/package/react-svg-loader

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [
            { removeTitle: false }
          ],
        },
      },
    },
  ],
},

Webpack 3: How do I add options to a chained loader?

1 Answers1