[Руководство по заполнению пит-стопа] путь к изображению веб-пакета и проблемы с упаковкой

Webpack
Webpack — это инструмент для упаковки модулей. Обычно мы используем некоторые фреймворки разработки React, Vue и т. д., расширяемые языки Typescript, Flow и т. повысить эффективность разработки, но все они не распознаются браузером напрямую. Очень громоздко и трудоемко компилировать и упаковывать вручную, но Webpack может автоматически анализировать, компилировать и упаковывать эти сложные и большое количество зависимостей в небольшие файлы, распознаваемые браузером.

Почему я не могу напрямую определить путь к изображению при загрузке изображения в JavaScript?

Поскольку в веб-пакете, кроме файлов типа js, можно напрямую распознавать и упаковывать файлы других типов (css, изображения и т. д.) необходимо загружать и упаковывать через определенный загрузчик, а для изображений необходимо использовать загрузчик файлов или загрузчик URL-адресов. .

Когда путь к изображению вводится в JavaScript, веб-пакет не знает, что это изображение, поэтому ему необходимо сначала загрузить ресурс изображения с помощью require, а затем добавить его к объекту в качестве пути к изображению.

Функции url-loader и file-loader в основном одинаковы, за исключением того, что url-loader может конвертировать изображения меньше определенного размера (который можно настроить и настроить) в формат base64.

Сцена, использованная в картине

Установить загрузчик файлов

npm i file-loader

yarn add file-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['file-loader']             
            }
        ]
    }
}

  • Используемый в CSS загрузчик файлов может автоматически определять путь к изображению в коде CSS и упаковывать его по указанному пути.

// html
<img src="./images/bg_img.png">

// css
{ background: url("./images/bg_img.png"); }

  • использовать в javascript

// js
let uri = require('./images/bg_img.png');

let img = document.querySelector('img');
img.src = uri;

// vue
<img :src="require('./images/bg_img.png')">
<div :style="{backgroundImage: 'url(' + require('./images/bg_img.png') + ')'}"> // 这里动态加载图片的时候，使用background时不要添加其他属性，如：no-repeat、center等，如需要单独设置

url-loader

Функция url-loader в основном такая же, как и у file-loader, поэтому его также можно заменить на url-loader.

url-loader также может преобразовывать изображения меньше определенного размера в формат base64.

npm i url-loader

yarn add url-loader

// webpack.conf.js

module.exports={
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: ['url-loader'],
                options: {
                    name: './images/[name].[ext]',
                    limit: 1024
                }        
            }
        ]
    }
}

Функция атрибута limit заключается в преобразовании изображений, размер файла которых меньше 1024 байт, в формат base64, а изображения размером более 1024 байт упаковываются и обрабатываются загрузчиком файлов.

Используйте метод загрузчика файлов для упаковки:

Используйте url-loader для упаковки:


Если не написать атрибут limit, в режиме url-loader ничего не будет упаковано

Суммировать

  1. Для упакованных изображений необходимо использовать загрузчик URL или загрузчик файлов.
  2. При использовании изображений в css путь к изображению может быть упакован напрямую; при использовании изображений в js сначала используйте требование для загрузки ресурсов изображения, а затем передайте путь к объекту
  3. url-loader может преобразовывать формат изображения в base64 (рекомендуется, когда размер изображения небольшой, например, иконки и т. д., что может уменьшить http-запросы; но не рекомендуется, когда изображение слишком большое, что приведет к слишком большому данные и медленная загрузка)


Категории