前言：此节的开展是在上一节的基础上进行的，（每一节都是从无到有编写关于此节的知识），最后会附上相关完整代码。上一节

CSS中的图片处理

1.新建images文件夹

在src目录下新建一个images文件夹，把需要的图片放入images文件夹。图片下载

2.新增标签

在index.html文件中增加一个放置div的标签（需要注意的是这里修改的是src下的index.html文件，不是dist下的），代码如下：

<div id="img"></div>

3.编写样式

在src目录下的css目录下的index.css文件中编写样式，如下,

src/css/index.css:

body{

    background-color: #018eea;

    color: red;

    font-size: 32px;

    text-align: center;

}

#img{

    background-image: url(../images/webapck.jpg);

    width:271px;

    height:285px;

}

4.loader安装

使用npm在终端安装file-loader和url-loader。

npm install --save-dev file-loader url-loader

关于file-loader和url-loader，下面了解一下：

（1）file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。

（2）url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

5.配置url-loader

安装之后，开始使用loader，此时在loader使用时不需要用require引入，在plugins才需要使用require引入。

webpack.config.js文件：

 //模块：例如解读CSS,图片如何转换，压缩

    module:{

        rules: [

            {

              test: /\.css$/,

              use: [ 'style-loader', 'css-loader' ]

            },{

               test:/\.(png|jpg|gif)/ ,

               use:[{

                   loader:'url-loader',

                   options:{

                       limit:500000

                   }

               }]

            }

          ]

    },

注释：

  • test:/.(png|jpg|gif)/是匹配图片文件后缀名称。

  • use：指定使用的loader和loader的配置参数。

  • limit：是把小于500000B的文件打成Base64的格式，写入打包后的js中。

此处只是其中一种配置方式，其余可参考

为什么只使用了url-loader？

在配置loader时，我们并没有在webpack.config.js中使用file-loader，但是依然打包成功了。这个和file-loader和url-loader之间的关系有关。url-loader和file-loader是什么关系呢？简单的说，url-loader封装了file-loader，url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。url-loader工作分两种情况：

1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；

2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。

也就是说，其实我们只安装一个url-loader就可以了。但是为了以后的操作方便，这里就顺便安装上file-loader。

6.打包

在终端使用webpack命令进行打包。

webpack

webpack打包之后，我们并没有看到在dist目录下生成相关的图片，这是因为被打包到了js中（base64），图片被用代码的形式放置在js中。因此大图片不适合打包成base64格式。

7.启动服务

在终端中执行npm run server命令，启动我们的服务，然后通过 http://localhost:1818/ 进行访问。

访问效果如下：

相关完整代码：

src/index.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>webpack</title>

</head>

<body>

<div id="img"></div>

<div id="title"></div>

</body>

</html>

src/entry.js:

import css from './css/index.css'

document.getElementById('title').innerHTML='Hello Webpack';

src/css/index.css:

body{

    background-color: #018eea;

    color: red;

    font-size: 32px;

    text-align: center;

}

#img{

    background-image: url(../images/webapck.jpg);

    width:271px;

    height:285px;

}

package.json:

{

  "name": "webpack3",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "server": "webpack-dev-server"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "css-loader": "^2.0.0",

    "file-loader": "^2.0.0",

    "html-webpack-plugin": "^3.2.0",

    "style-loader": "^0.23.1",

    "url-loader": "^1.1.2",

    "webpack": "^3.6.0",

    "webpack-dev-server": "^2.9.7"

  }

}

webpack.config.js:

const path = require('path');

const uglify = require('uglifyjs-webpack-plugin');

const htmlPlugin= require('html-webpack-plugin');

module.exports={

    //入口文件的配置项

    entry:{

        entry:'./src/entry.js',

        //这里我们又引入了一个入口文件

        entry2:'./src/entry2.js',

    },

    //出口文件的配置项

    output:{

        //输出的路径，用了Node语法

        path:path.resolve(__dirname,'dist'),

        //输出的文件名称

        filename:'[name].js'

    },

    //模块：例如解读CSS,图片如何转换，压缩

    module:{

        rules: [

            {

                test:/\.css$/,

                use:['style-loader','css-loader']

            },

            {

                test:/\.(png|jpg|gif)/,

                use:[{

                    loader:'url-loader',

                    options:{

                        limit:500000

                    }

                }

                ]

            }

        ]

    },

    //插件，用于生产模版和各项功能

    plugins:[

        // new uglify(),

        new htmlPlugin({

            minify:{

                removeAttributeQuotes:true

            },

            hash:true,

            template:'./src/index.html'

        })

    ],

    //配置webpack开发服务功能

    devServer:{

        contentBase:path.resolve(__dirname,'dist'), //绝对路径

        host:'localhost',

        compress:true,

        port:1818

    }

}

(8/24) 图片跳坑大战--css中的图片处理的更多相关文章

  1. (9/24) 图片跳坑大战--css分离与图片路径处理

    前言: 在上一节当中,我们把小图片打包成Base64格式(打包到了js当中).我们也算是对webpack对图片的打包有个基本了解. 本节我们准备把css从JavasScript代码中分离出来,这会遇到 ...

  2. (10/24) 图片跳坑大战--处理html中的图片

    补充,在前面的服务启动执行命令中,我们在package.json中的配置信息为: "scripts": { "server": "webpack-de ...

  3. CSS中对图片(background)的一些设置心得总结

    写网页的时候很多情况需要对图片进行操作,如何在不进行专业的美工裁切操作的情况下而让自己的素材度达到最大的满意度呢,这是一个问题,对于懒得开ps切图的我,通常会直接在网络上download一张图片,直接 ...

  4. CSS中背景图片定位方法

    转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...

  5. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

  6. CSS中背景图片的background-position中的left top到底是相对于谁的？

    在学习的时候遇到了如下问题: CSS中背景图片的background-position中的left top到底是相对于谁的,content-box?padding-box?border-box? ba ...

  7. (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...

  8. HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法

    CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...

  9. WEB项目构建优化之自动清除CSS中的图片缓存

    在web项目构建发布时,经常遇到css中图片的修改优化,那么如何清除图片的缓存成为必须要解决的问题.曾经有过傻傻的方法就是直接在图片后面添加随机数.今天主要是从构建自动化方式来解决这个问题,提高开发及 ...

随机推荐

  1. UDP套接字编程　返回系统时间

    计算机网络实验 简单UDP套接字编程 这是学校老师自己改进了一点的题目.我预习了好久才搞明白,同学来问的时候,一大堆简单问题实在是不想回答．．．所以,这时候我觉得博客是个好东西! 我的任务是做客户端和 ...

  2. 普通Linux用户1分钟上手vi编辑器

    *导读:普通用户只要花1分钟看第二部分即可.高级用户请忽略本文* 目录 1. 编辑器之战 2. vi的使用 2.1 vi的3个模式 2.2 vi的3个模式切换 2.3 vi最基本的命令 2.4 vi的 ...

  3. 2019南昌邀请赛 L 计算几何 G(待补)

    #include<bits/stdc++.h> const double PI=acos(-1.0); ; using namespace std; struct Point { doub ...

  4. 将连接数据库的JDBC提成BaseDao

    package com.shangke; import java.io.FileReader;import java.io.IOException;import java.io.InputStream ...

  5. 7. Vulnerability exploitation tools （漏洞利用工具 11个）

    Metasploit于2004年发布时,将风暴带入了安全世界.它是开发,测试和使用漏洞利用代码的高级开源平台. 可以将有效载荷,编码器,无操作生成器和漏洞利用的可扩展模型集成在一起,使得Metaspl ...

  6. eclipse与visualVM与mat

    GC与CPU与内存的查看与分析 本文主要讲visualVM,MAT的下载配置;以及如何运用visualVM生成hprof文件;如何用visualVM分析CPU消耗,程序瓶颈在哪里;怎么用MAT导入hp ...

  7. 批量写入redis

    批量写入redis key := GetSeriesKey(series.Id) idNames = append(idNames, key, series.Name) == { err = Mset ...

  8. redis scan删除key的方法封装

    /** * @desc 迭代式的删除redis key * 用法: * $redis = BaseService::S()->getRedisConfig(\Yii::$app->redi ...

  9. jQuery: 判断from表单是否修改

    <script> $(function() { $("#myform :input").change(function(){ $("#myform" ...

  10. 关于js中原生构造函数的继承

    前言 在如今快节奏的工作当中,很多基础的东西会渐渐地被丢掉.就如继承这个话题,写React的同学应该都是class xxx extends React.Component,然而这可以理解为es5的一个 ...