laravel-mix中使用svg-sprite-loader处理SVG图标，需要怎么修改mix中原有默认的配置？

Question

概述 我想使用svg-sprite-loader包来处理SVG图标，参考了Github上的vue-element-admin/..../index.js。 问题 我按照花裤衩老师的教程传送门进行配置webpack. 但是发现查看了Laravel-mix的默认module rules配置(路径：node_modules/laravel-mix/src/builder/webpack-rules.js)，Line:11-73有： rules.push({ // only include svg that doesn't have font in the path or file name by using negative lookahead test: /(\.(png|jpe?g|gif)$|^((?!font).)*\.svg$)/, loaders: [ { loader: 'file-loader', ...... } ] }); // Add support for loading fonts. rules.push({ test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/, loader: 'file-loader', ..... }); 求教 是否有办法可以在原有Laravel-mix的webpack配置基础上只修改这module.rules的办法？ 或者是不用laravel-mix的配置，新建一个可以兼容原来代码的webpack config？

Answer 1

我也遇到了跟楼主同样的问题，现在已经解决了，只要在 webpack.mix.js 添加如下配置即可：

Mix.listen('configReady', (webpackConfig) => {
    // Create SVG sprites
    webpackConfig.module.rules.unshift({
        test: /\.svg$/,
        loader: 'svg-sprite-loader',
        include: /(assets\/js\/icons\/svg)/,
        options: {
            symbolId: 'icon-[name]',
        }
    });

    // Exclude 'svg' folder from font loader
    let fontLoaderConfig = webpackConfig.module.rules.find(rule => String(rule.test) === String(/\.(woff2?|ttf|eot|svg|otf)$/));
    fontLoaderConfig.exclude = /(assets\/js\/icons\/svg)/;
});

只要把 include 和 exclude 改成你相应的路径就好了。

Answer 2

可以修改webpackConfig参数：

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.(woff2?|ttf|eot|svg|otf)$/,
                loader: 'file-loader',
                options: {
                    name: '../fonts/[name].[ext]?[hash]',
                    publicPath: '../foo/bar' // 该路径
                }
            }
        ]
    }
});

别忘记了在package.json移除--config=node_modules/laravel-mix/setup/webpack.config.js