Запретить Webpack кодировать base64 для изображения - PullRequest
Новая
       52

Запретить Webpack кодировать base64 для изображения

0 голосов
/ 20 июня 2020

Я изучаю Vue и создаю небольшое приложение с Vue CLI. Во время этого процесса я встретил средство устранения неполадок, которое меня очень сбило с толку, с vue .config. js

Это мой vue .config. js контент: 

    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',
                  },
                },
              ],
            },
          ]
        }
      }
    }

Ниже приведен образец моего файла s css: 

    .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;
    }

Я ожидал, что фоновые изображения в файле s css должны быть экспортированы в папку с дистрибутивными ресурсами с [name]. [ext] как определено, но webpack всегда кодирует их в формат base64, и следующий снимок экрана является примером:

Изображение экрана

Мне все еще нужно Чтобы описать больше здесь, я также искал в Google много тем по этому вопросу, я тоже следил за этими ответами, но все еще не повезло.

Так что, пожалуйста, помогите мне избавиться от этой головной боли, любая помощь будет оценена!

Спасибо

1 Ответ

0 голосов
/ 20 июня 2020

Вы используете url-loader, который преобразует файлы в URI base64.

Ссылка: https://webpack.js.org/loaders/url-loader/

При удалении этого изображения изображения будут кодироваться с использованием соответствующего URL-адреса.

...