Prevent Webpack encodeing base64 for image - vue.js

Question

I'am learning Vue and building a small app with Vue CLI. During this process, I've met a troubleshoot that made me very confuse, with vue.config.js
This is my vue.config.js's content:
const webpack = require('webpack')
const path = require('path')
const is_production = process.env.NODE_ENV === 'production'
module.exports = {
publicPath: is_production ? "http://localhost:5000" : "https://my.carpi.test:8080",
devServer: {
https: true,
host: 'my.carpi.test'
},
chainWebpack: config => {
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
options.limit = 10000
options.name = '[name].[ext]'
return options
})
},
configureWebpack: {
mode: is_production ? 'production' : 'development',
entry: './src/main.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'umd',
globalObject: 'this'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: [
"style-loader",
'css-loader',
'sass-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts',
publicPath: 'assets'
},
},
],
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images',
},
},
],
},
]
}
}
}
And below is a sample of my scss file:
.browser-icon, [class^="browser-icon"] {
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.browser-icon-xs, .browser-icon.xs {
height: 18px;
width: 18px;
background-image: url('../images/Unknown.png');
background-size: cover;
}
.browser-ie-icon {
background-image: url('../images/IE.png') !important;
}
.browser-chrome-icon {
background-image: url('../images/Chrome.png') !important;
}
What I expected is the background images in scss file should be exported to distribution assets folder with [name].[ext] as defined, but webpack always encode them to base64 format, and the following screenshot is an example:
Screenshot Image
I still need to describe more here is I've also googled many threads about this question, I've also followed those answers but still unlucky.
So please help me out of this headache, any help would be appreciated!
Thanks

Answer 1

You are using url-loader which transforms files into base64 URIs.
Ref: https://webpack.js.org/loaders/url-loader/
Removing this will encode the images using the appropriate url.