傻瓜式学习webpack（四）——图片处理

最新推荐文章于 2024-06-29 23:45:00 发布

AryaoO

最新推荐文章于 2024-06-29 23:45:00 发布

阅读量944

点赞数

分类专栏： webpack 文章标签： webpack webpack图片处理

本文链接：https://blog.csdn.net/Selina_Chan/article/details/78455734

版权

webpack 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

有了前面三章的基础，利用webpack处理图片也是同理的。

一、首先你需要安装 file-loader和url-loader；

二、在你的webpack.config.js中的代码添加处理图片相关的loader，添加后如下：

module.exports = {
    //entry 入口文件 让webpack用哪个文件作为项目的入口
    entry: {
        index: './view/index.js',
    },
    //output 出口 让webpack把处理完成的文件放在哪里
    output: {
      path: __dirname+'/dist',
      filename: '[name].js'
    },
    //时刻监听文件的更新
    watch: true,
    watchOptions: {
        ignored: /node_modules/
    },
    //module 模块 要用什么不同的模块来处理各种类型的文件
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',//采用babel模块
                exclude: /node_modules/,//忽略mode_modules的代码
                query: {
                    presets: ['es2015','react']//解析es6和react语言
                }
            },{  
                test: /\.css?$/,  
                loaders: ['style-loader','css-loader'],  
              },{
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&name=./image/[name].[ext]?[hash]'
              }
        ]
    },
    resolve: {
        extensions: ['.coffee','.js']
    },
  };

这里我们看到test里面自动匹配了png、jpg和gif格式的图片。如果还需要更多格式的图片，只需在后面直接添加即可，用竖线分隔开。

loader后面的参数：

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

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

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

处理之前：

    background: url('../image/pro-2.png') center no-repeat;

处理之后：

    background:url(./image/pro-2.png?261540484ffc04fa3fb5a31fd802f126) center no-repeat；

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

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

所以，一旦图片文件小于所设定的参数，处理之后就变成下面这样，减轻很多的网络请求：

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4gAAAWhCAYAAADXw74KAAAAGXRFW…bTWsnwthzaThgVEKOJ1icWERy6pfwigmRef8jq1P8LMACIh/ZmigKAWgAAAABJRU5ErkJggg==) center no-rep