webpack3之处理图片

目录结构

目录结构

• 处理图片（一般是css、less、sass中，还有app.js中require的图片文件）

安装模块

npm install webpack style-loader precss postcss-loader css-loader autoprefixer file-loader url-loader --save

• 其中 file-loader url-loader两个模块是图片处理的必要模块

相关文件

//====app.js
require('./styles/index.css');
require('./styles/base.less');
require('./images/user-avater.png');
//====index.css文件
body{
  padding: 0px;
  margin:0px;
  background-color: #f8f8f8;
}
//====base.less
@colorFF:#666;
body{
color: @colorFF;
}
.page{
  background-color:#f8f8f8;
  position: absolute;
  top: 0px;
  padding-top:50px;
  left: 0px;
  right: 0px;
  bottom: 60px;
  overflow: auto;

  &.no-nav{
    bottom: 0px;
  }
}
  nav{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 60px;
    display: flex;
    border-top:1px solid #ededed;
    background-color: #fff;

    a:link,a:visited{
      text-decoration:none;
      flex: 1;
      text-align: center;
      box-sizing: border-box;
/*      border-right: 1px solid #ededed;*/
      color: #666;
      padding-top: 5px;
    }
    a:last-child{
      border-right: none;
    }
    a.v-link-active{
      color: #FF4354;
    }
    a i{
      display: block;
      margin: 0 auto;
      width: 25px;
      height: 25px;
    }
    a.home.v-link-active i{
      background: url('../images/nav-home-on.png') no-repeat center;
      background-size: contain;
    }
    a.home i{
      background: url('../images/nav-home-off.png') no-repeat center;
      background-size: contain;
    }
    a.topics.v-link-active i{
      background: url('../images/nav-circle-on.png') no-repeat center;
      background-size: contain;
    }
    a.topics i{
      background: url('../images/nav-circle-off.png') no-repeat center;
      background-size: contain;
    }
    a.message.v-link-active i{
      background: url('../images/nav-message-on.png') no-repeat center;
      background-size: contain;
    }
    a.message i{
      background: url('../images/nav-message-off.png') no-repeat center;
      background-size: contain;
    }
    a.user.v-link-active i{
      background: url('../images/nav-mine-on.png') no-repeat center;
      background-size: contain;
    }
    a.user i{
      background: url('../images/nav-mine-off.png') no-repeat center;
      background-size: contain;
    }
  }

配置文件（webpack.config.js）

var webpack=require('webpack');

//css文件提取器需要的配置项
var ExtractTextPlugin=require('extract-text-webpack-plugin');

//postcss-loader 需要的配置项
var precss       = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    app:'./src/app.js'
  },
  output: {
    path: './build',
    filename: 'js/[name].js'
  },
  module: {
    loaders: [
      // 编译css并自动添加css前缀 并将css提取
      { test: /\.css$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader')},
      { test: /\.less$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader!less')},

//=========为了处理图片我们加入以下配置======================
      {
        // 图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
        // 如下配置，将小于8192byte的图片转成base64码
          test: /\.(png|jpg|gif)$/,
          loader: 'url-loader?limit=8192&name=../images/[name].[ext]?[hash]',
        }
//======================================================

    ]
  },
  postcss: function () {
    return [precss, autoprefixer];
  },
  plugins:[
    new ExtractTextPlugin('css/app.css'),
    ]
}

url-loader的参数

• limit = 后面跟的是数字，加上这个参数，图片文件大小（单位为byte）小于该参数值的文件会被转换为base64编码的形式
  （如）

//处理之前
    a.home.v-link-active i{
      background: url('../images/nav-home-on.png') no-repeat center;
      background-size: contain;
    }
//处理之后
nav a.home.v-link-active i {
  background: url(data:image/png;base64,iVBORw0KGgoAA...BJRU5ErkJggg==) no-repeat center;
  background-size: contain;
}

• name 是表示文件被处理之后再bulid目录中的路径和图片生成规则
  如

// 处理之前
.page{
  position: absolute;
  top: 0px;
  background-image: url('../images/user-avater.png');
}
//处理之后
.page {
  position: absolute;
  top: 0px;
  background-image: url(./images/user-avater..png?1e0325ccb9b6cb0b41103804d088890d);
}

• [name]表示图片文件的文件名

• [ext]表示图片文件的扩展名

• [hash]表示图片文件的哈希值

• 注 以上三个参数可以自由组合，改变图片被处理有生成的文件名等信息

HTML引用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>处理css</title>
  <script type="text/javascript" src="build/js/app.js"></script>
  <link rel="stylesheet" type="text/css" href="build/css/app.css"> 
<body>
  
</body>
</html>

扩展阅读

• html-webpack-plugin插件使用方法
• webpack之处理css文件