Override webpack loader config for a specific file

Question

I set-up my new project with vue-webpack-boilerplate, where I use the jsoneditor. The default webpack configuration bundles all image assets in the the img directory, but the jsoneditor expects its icons in the css/img directory.

I discovered the webpack.base.conf.js file with the rules-configuration, which is set like:

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]'),
    },
},

So, changing utils.assetsPath('img/[name].[hash:7].[ext]'), to utils.assetsPath('css/img/[name].[hash:7].[ext]'), did the trick, but I would like to apply this rule only to the jsoneditor-icons.svg file.

Doing exclude: [path.join(resolve('node_modules'), './jsoneditor/dist/img')], stops webpack from putting the jsoneditor-icons to the /img folder, but an additional rule

{
    test: /.*(jsoneditor-icons.svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        name: utils.assetsPath('css/img/[name].[hash:7].[ext]'),
    },
},

did not do anything.

Could someone please point me to my mistake? The goal is to keep original webpack configuration and only override the rule for the jsoneditor-icons.svg file.

Answer 1

The problem seem to be the missing limit: property in the options object of my overriden settings.

The working configuration looks like:

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
                limit: 10000,
                name: utils.assetsPath('css/img/[name].[hash:7].[ext]'),
    },
    include: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],
},
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // exclude jsoneditor icons
    loader: 'url-loader',
    options: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]'),
    },
    exclude: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],
},