how to config the url-loader in webpack to transform only some folders?

Question

webpack.js

file.jpg: transform to base64 by url-loader

file.png: use file-loader

just use the ext to decide all file.jpg in project to transform。

but how to deal the file.gif?

indeed I want to know how to config the url-loader in webpack to transform only some folders or some files?but not just all files of some types.

sorry,my english is poor...

rules:{
    {
        test: /\.(png|svg|ttf|eot|woff|otf)$/,
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]?[hash]'
        }
    },
    {
        test: /\.(gif|jpg)$/,
        loader: 'url-loader',//url-loader?limit=30000
        options: {
            limit:30000,
            name: '[path][name].[ext]?[hash]',
        },
        exclude: ////don't know how to config
    }
}

Directory Structures

score 3 · Accepted Answer · answered Mar 01 '17 at 17:06

3

To exclude one path:

exclude: /my_excluded_path/

To exclude multiple paths:

exclude: [
    /my_excluded_path/,
    /my_other_excluded_path/
]

Excluding a specific absolute path instead of using a regular expression:

exclude: path.resolve(__dirname, "my_excluded_path")

answered Mar 01 '17 at 17:06

Patrick Hund

19,163
11
66
95

thanks... I use the regular expression and string path before. – daidaibenben Mar 02 '17 at 03:24

score 1 · Answer 2 · answered Mar 02 '17 at 03:21

Excluding a specific absolute path instead of using a regular expression

{
    test: /\.(gif|jpg|png|svg|ttf|eot|woff|otf)$/,//(png|jpg|gif|svg)
    loader: 'file-loader',
    options: {
        name: '[path][name].[ext]?[hash]'
    },
    exclude:  [path.join(projectRoot, './vue/img')]
},
{
    test: /\.(gif|png|jpg)$/,
    loader: 'url-loader',
    options: {
        limit:30000,
        name: '[path][name].[ext]?[hash]',
    },
    exclude:  [path.join(projectRoot, './vue/image')]
}

how to config the url-loader in webpack to transform only some folders?

2 Answers2