Научит вас, как использовать webpack для создания css-спрайтов

предисловие

Когда мы разрабатываем веб-сайты, мы обычно объединяем часто используемые значки в css-спрайты (изображения спрайтов), что может эффективно уменьшить количество http-запросов на сайте и повысить производительность сайта.

Давайте научимся использоватьwebpackОбъединяйте изображения спрайтов.

Подготовить

webpack
webpack-spritesmithплагин
file-loader
sass-loader(потому чтоwebpack-spritesmithВ дополнение к созданию карты спрайтов, соответствующиеmixin, это очень удобно в использовании, поэтому используйтеsass)
Здесь я также используюExtractTextPluginДля извлечения файла css это не обязательно, можно и не использовать, нужно установить, если используетеextract-text-webpack-pluginэтот плагин

Установите вышеуказанное, используя npm

Пожалуйста, начните наше шоу

Шаг 1: Подготовьте значки, которые мы хотим объединить, и поместите их в папку ico в папке src.

Я поделюсь с вами простым в использовании веб-сайт загрузки значка. Мне нравится стиль значков в нем, и это бесплатно. Вы также можете скачать свой любимый значок для этого упражнения.

57 900 бесплатных плоских иконок

Это изображение png, которое я скачал

step2 Напишите, как показано ниже, в вашем файле webpack.config.js.

const path = require('path');
const SpritesmithPlugin = require('webpack-spritesmith');

module.export = {
    // ...
    module: {
        rules: [
            {
                test: /png$/
                loader:[
                    'file-loader?name=i/[hash].[ext]'
                ]
            },
            {
                test: /\.(css|scss)$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'postcss-loader', 'sass-loader']
                })
            }
        ]
    },

    resolve: {
        modules: [
            'node_modules',
            'assets/sprite' //css在哪里能找到sprite图
        ]
    },

    plugins: [
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'src/ico'),  //准备合并成sprit的图片存放文件夹
                glob: '*.png'  //哪类图片
            },
            target: {
                image: path.resolve(__dirname, 'src/assets/sprites.png'),  // sprite图片保存路径
                css: path.resolve(__dirname, 'src/assets/_sprites.scss')  // 生成的sass保存在哪里
            },
            apiOptions: {
                cssImageRef: "~sprite.png" //css根据该指引找到sprite图
            }
        })
    ]
}

шаг 3 в вашем`scss`в файле`@import`Импортируйте сгенерированный файл

@import '../../../assets/sprite/_sprite.scss'; //路径请自行更改

.facebook{ 
    @include sprite($facebook); 
}

.twitter{ 
    @include sprite($twitter); 
}

.google{ 
    @include sprite($google); 
}

step4 Запускаем webpack и видим, что наше изображение спрайта использовалось на нашем сайте

/assets/sprite/sprite.png - это изображение спрайта, которое мы создали

Взгляните на файл sass, созданный в то же время

// SCSS variables are information about icon's compiled state, stored under its original file name
//
// .icon-home {
//   width: $icon-home-width;
// }
//
// The large array-like variables contain all information about a single icon
// $icon-home: x y offset_x offset_y width height total_width total_height image_path;
//
// At the bottom of this section, we provide information about the spritesheet itself
// $spritesheet: width height image $spritesheet-sprites;
$facebook-name: 'facebook';
$facebook-x: 0px;
$facebook-y: 0px;
$facebook-offset-x: 0px;
$facebook-offset-y: 0px;
$facebook-width: 64px;
$facebook-height: 64px;
$facebook-total-width: 128px;
$facebook-total-height: 128px;
$facebook-image: '~sprite.png';
$facebook: (0px, 0px, 0px, 0px, 64px, 64px, 128px, 128px, '~sprite.png', 'facebook', );
$google-name: 'google';
$google-x: 64px;
$google-y: 0px;
$google-offset-x: -64px;
$google-offset-y: 0px;
$google-width: 64px;
$google-height: 64px;
$google-total-width: 128px;
$google-total-height: 128px;
$google-image: '~sprite.png';
$google: (64px, 0px, -64px, 0px, 64px, 64px, 128px, 128px, '~sprite.png', 'google', );
$twitter-name: 'twitter';
$twitter-x: 0px;
$twitter-y: 64px;
$twitter-offset-x: 0px;
$twitter-offset-y: -64px;
$twitter-width: 64px;
$twitter-height: 64px;
$twitter-total-width: 128px;
$twitter-total-height: 128px;
$twitter-image: '~sprite.png';
$twitter: (0px, 64px, 0px, -64px, 64px, 64px, 128px, 128px, '~sprite.png', 'twitter', );
$spritesheet-width: 128px;
$spritesheet-height: 128px;
$spritesheet-image: '~sprite.png';
$spritesheet-sprites: ($facebook, $google, $twitter, );
$spritesheet: (128px, 128px, '~sprite.png', $spritesheet-sprites, );

// The provided mixins are intended to be used with the array-like variables
//
// .icon-home {
//   @include sprite-width($icon-home);
// }
//
// .icon-email {
//   @include sprite($icon-email);
// }
//
// Example usage in HTML:
//
// `display: block` sprite:
// <div class="icon-home"></div>
//
// To change `display` (e.g. `display: inline-block;`), we suggest using a common CSS class:
//
// // CSS
// .icon {
//   display: inline-block;
// }
//
// // HTML
// <i class="icon icon-home"></i>
@mixin sprite-width($sprite) {
  width: nth($sprite, 5);
}

@mixin sprite-height($sprite) {
  height: nth($sprite, 6);
}

@mixin sprite-position($sprite) {
  $sprite-offset-x: nth($sprite, 3);
  $sprite-offset-y: nth($sprite, 4);
  background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin sprite-image($sprite) {
  $sprite-image: nth($sprite, 9);
  background-image: url(#{$sprite-image});
}

@mixin sprite($sprite) {
  @include sprite-image($sprite);
  @include sprite-position($sprite);
  @include sprite-width($sprite);
  @include sprite-height($sprite);
}

// The `sprites` mixin generates identical output to the CSS template
//   but can be overridden inside of SCSS
//
// @include sprites($spritesheet-sprites);
@mixin sprites($sprites) {
  @each $sprite in $sprites {
    $sprite-name: nth($sprite, 10);
    .#{$sprite-name} {
      @include sprite($sprite);
    }
  }
}

Наконец, посмотрите на эффект приложения на сайте

Суммировать

Выше показано, как webpack генерирует css спрайт. Думаете, это очень просто? Если эта статья была вам полезна, не забудьте поставить лайк.

Эта статья была опубликована Zhang Xiaodian в Nuggets 3 октября 2017 г. Пожалуйста, укажите источник для перепечатки.Оригинальная ссылка

Ссылаться на

webpack-spritesmith