Seems Webpack 2.* ExtractTextPlugin loader syntax smart merging is not working

Assume we have webpack.common.js with follow loader section:

//...
   module: {
        rules: [
	//...
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                import: false,
                                url: false,
                                sourceMap: true,
                            },
                        },
                    ],
                }),
	    //...
            },
        ],
    },
//...

And in weback.test.js I want override this css loader typing:

var merge = webpackMerge.smart
return merge(commonConfig, {
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [{
                        loader: 'null-loader',
                    }],
                },
            ],
        },
}

I get the following error:

TypeError: entry.loader.match is not a function at uniteEntries (\node_modules\webpack-merge\lib\join-arrays-smart.js:130:42) at arrayIncludesWith \node_modules\lodash_arrayIncludesWith.js:15:9)

The root cause is in the new ExtractTextPlugin syntax, which is not an array, or string, but it is a function written to loader property.

[bebraw]

I’ll drop support for merge.smart and merge.smartStrategy in the next major version as it’s tricky to support due to different webpack versions and overall complexity.

Can you rewrite the configuration in terms of regular merge or mergeStrategy? I use solely merge for all of my personal work as it’s predictable.

[bebraw]

@sqfbeijing It’s tricky. I would push both behind a function or something to merge and then compose based on target. Less magic and cleaner as well.