鍍金池/ 問答/PHP  室內(nèi)設(shè)計(jì)/ laravel-mix中使用svg-sprite-loader處理SVG圖標(biāo)，需

laravel-mix中使用svg-sprite-loader處理SVG圖標(biāo)，需要怎么修改mix中原有默認(rèn)的配置？

概述

我想使用svg-sprite-loader包來處理SVG圖標(biāo)，參考了Github上的vue-element-admin/..../index.js。

問題

我按照花褲衩老師的教程傳送門進(jìn)行配置webpack.

clipboard.png

但是發(fā)現(xiàn)查看了Laravel-mix的默認(rèn)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配置基礎(chǔ)上只修改這module.rules的辦法？
  2. 或者是不用laravel-mix的配置，新建一個(gè)可以兼容原來代碼的webpack config？
回答
編輯回答
命多硬

可以修改webpackConfig參數(shù)：

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

2018年5月18日 04:06
編輯回答
心癌

我也遇到了跟樓主同樣的問題，現(xiàn)在已經(jīng)解決了，只要在 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 改成你相應(yīng)的路徑就好了。

2017年11月25日 06:17