Laravel-mix: Users rule should take precedence over standard ones

[rderimay]

When passing a webpackConfig to Mix with loaders, the standard mix webpack config will take precedence over the user's passed ones.

Passing this

mix.webpackConfig({ 
module: { rules: [ { 
    test: /\.svg$/,
    loaders: ['svg-sprite-loader?' + JSON.stringify({
        name: '[name]_[hash]',
        prefixize: true
    })]
} ] } });

will lead to this rule to FOLLOW the standard mix config rules. As a consequence, the "/.svg" test is useless as .svg is already catched by the standard .svg font rule of mix.

I think we should have the user's rules take precedence over the standard ones.

This will also solve #350

[QWp6t]

jway, an ezpz way of doing this is with webpack-merge's merge.smart() function.

[JeffreyWay]

@QWp6t Thanks! Added.

[rderimay]

@QWp6t and @JeffreyWay. This still does not solve the precedence of the standard mix webpack config of the user's passed one.

1. webpack-merge.smart will not merge intelligently a loader rule with test: /\.(woff2?|ttf|eot|svg|otf)$/, and another rule with test: /\.svg$/,by removing svg from the test string of the first one.
2. module.exports = require('webpack-merge').smart(module.exports, Mix.webpackConfig));will still make the Mix config have precedence over user's webpackConfig

Maybe there is another way to solve this problem, but I dont see any right now.

[IlyaSemenov]

@rderimay I ended up creating webpack.config.js of my own where I patched up what laravel-mix emitted:

const config = require('laravel-mix/setup/webpack.config');

// Exclude SVG from laravel-mix webpack config, we will handle them with vue-svg-loader
// See also: https://github.com/JeffreyWay/laravel-mix/issues/350
for (const rule of config.module.rules) {
    if (rule.test.toString() == '/\\.(woff2?|ttf|eot|svg|otf)$/') {
        rule.test = /\.(woff2?|ttf|eot|otf)$/;
    }
}

module.exports = config;

Don't forget to update your package.json (get rid of --config=node_modules/laravel-mix/setup/webpack.config.js).

The same can probably be implemented in webpack.mix.js alone by monkey-patching mix.config.finalize.

[stephan-v]

@IlyaSemenov That is a really nasty solution for something that might not even be an issue. Considering SVG files to be fonts is a really dangerous statement to just make.

I think the people that might benefit from that SVG addition in the default Webpack file are heavily outweighed by the people who will run into the kind of problems shown here.

I guess this is still not solved properly but in it's current state SVG's are not handled properly.

[YahzeeSkellington]

...doesn't Mix already assumes SVGs to be fonts? SVG image files are treated as such in webpack.config.js. I tried to use svg-sprite-loader plugin and Mix returned an error stating that the files were already in the pipe for another process. I had to edit the font test in the Mix config file itself to exclude my sprites folder from being processed as fonts

[stephan-v]

@YahzeeSkellington Yep. You are just another example of why this shouldn't be done the way it is currently being done.

[mattkoch614]

@IlyaSemenov - While I agree about it being somewhat hacky, your solution is the only one that worked for me. It also prevents having to edit the underlying Mix files directly, which I like. Thanks!

At this point I am considering just switching to something like FontAwesome for the time being...