webpackwebpack-3

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


// ...    
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


Solution

  • 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 }
              ],
            },
          },
        },
      ],
    },