webpack之postcss集成

前言

最近項目中在使用webpack，css是採用sass->postcss的結構, postcss 主要完成了下面幾個功能

1. autoprefix，樣式加前綴

2. preces

3. 合併圖片

   1) 能夠合併多張雪碧圖
       2) 能夠按照不一樣的比例合併圖片
       3) 對一些簡單的圖片能夠使用base64編碼

4. 兼容IE瀏覽器

5. 後期須要將px轉換爲em，使用media-query作屏幕適配

其餘功能都比較容易實現，現成的插件都能知足，合併圖片如今使用的是sprites，有一些編碼，在這裏先貼出來

webpack.config.js

let postcssSprites = require('postcss-sprites');
let sprites = postcssSprites.default;
let precss = require('precss');
let assets = require('postcss-assets');
let autoprefixer = require('autoprefixer');

{

postcss: [
        autoprefixer,
        precss,
        assets({//主要是用來作base64編碼的
            basePath: __dirname + '/client',
            relative: false
        })
    ]
}

//雪碧圖相關代碼
let spritesConfig = sprites({
    retina: true,//支持retina，能夠實現合併不一樣比例圖片
    verbose: true,
    spritePath: './public/images/',//雪碧圖合併後存放地址
    stylesheetPath: './public',
    basePath: './',
    filterBy: function (image) {
        //過濾一些不須要合併的圖片，返回值是一個promise，默認有一個exist的filter
        //
        if (image.url.indexOf('/images/sprites/') === -1) {
            return Promise.reject();
        }
        return Promise.resolve();
    },
    groupBy: function (image) {
        //將圖片分組，能夠實現按照文件夾生成雪碧圖
        return spritesGroupBy(image);
    },
    hooks: {
        onUpdateRule: function (rule, comment, image) {
            //更新生成後的規則，這裏主要是改變了生成後的url訪問路徑
            return spritesOnUpdateRule(true, rule, comment, image);
        },
        onSaveSpritesheet: function(opts, groups) {
            return spritesOnSaveSpritesheet(true, opts, groups);
        }
    }
});

export function spritesGroupBy(image) {

let groups = /\/images\/sprites\/(.*?)\/.*/gi.exec(image.url);
    let groupName = groups ? groups[1] : group;
    image.retina = true;
    image.ratio = 1;
    if (groupName) {
        let ratio = /@(\d+)x$/gi.exec(groupName);
        if (ratio) {
            ratio = ratio[1];
            while (ratio > 10) {
                ratio = ratio / 10;
            }
            image.ratio = ratio;
        }
    }
    return Promise.resolve(groupName);
}

export function spritesOnUpdateRule(isDev, rule, comment, image){
    var spriteUrl = image.spriteUrl;
    image.spriteUrl = '/public/' + spriteUrl;
    postcssSprites.updateRule(rule, comment, image);
}

export function spritesOnSaveSpritesheet(isDev, opts, groups) {
    let file = postcssSprites.makeSpritesheetPath(opts, groups);
    return file;
}

效果

--images
  --sprites
      --smiley@2x
      --smiley@3x
    
    生成後的雪碧圖sprite.smiley@2x.png,sprite.smiley@3x.png
    假設原圖片64*64，項目中想使用的大小是32*32，就把原圖片放在@2x的文件夾下面
    
    相關sass代碼以下
    @for $i from 1 through 4 {
       .icon-smiley-#{$i} {
        width: 24px;
        height: 24px;
        background-image: url('/images/sprites/smiley@2x/smiley_#{$i}.png');
      }
   }
   
   編譯後
   
    .icon-smiley-0 {
        width: 24px;
        height: 24px;
        background-position: -24px -48px;
        background-image: url('/public/sprite.smiley@2x.png');
      }

遇到的一些坑

1. 原本css不想使用sass的，存粹使用postcss，可是postcss不能檢測內部文件的改動，致使webpack不能自動編譯

   好比個人主文件main.css裏面
   @import 'page.css'
   這時候我修改page.css後，webpack不會自動編譯
   可是修改main.css，webpack能夠自動編譯，
   網上找了一些資料，也沒有最終解決問題，

2. 其餘坑還沒碰到。。。