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

概述

我想使用svg-sprite-loader包来处理SVG图标,参考了Github上的vue-element-admin/..../index.js

问题

我按照花裤衩老师的教程传送门进行配置webpack.

clipboard.png

但是发现查看了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',
    .....
});

求教

  1. 是否有办法可以在原有Laravel-mix的webpack配置基础上只修改这module.rules的办法?
  2. 或者是不用laravel-mix的配置,新建一个可以兼容原来代码的webpack config?
阅读 2.2k
评论
    2 个回答
    • 1.8k

    可以修改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