Prevent Webpack encodeing base64 for image

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

Prevent Webpack encodeing base64 for image

Answers (1)

Related Questions