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

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. SDL中 so库的使用

    用到的项目:Tocy-Android-SDLv2 JAVA层:只有一个 SDLActivity.java 路径\Android-SDLv2\src\org\libsdl\app 项目简单分析: 默认在 ...

  2. 服务器、应用框架、MVC、MTV

    web服务器:负责处理http请求,响应静态文件,常见的有Apache,Nginx以及微软的IIS. 应用服务器:负责处理逻辑的服务器.比如php.python的代码,是不能直接通过nginx这种we ...

  3. cpp实验二

    1.函数重载编程练习 编写重载函数add(),实现对int型,double型,Complex型数据的加法.在main()函数中定义不同类型 数据,调用测试. #include<iostream& ...

  4. httping使用

    httping --help: 显示帮助 httping -V: 显示版本 1.httping国内网站 I) httping -g http://www.jd.com -c 5 -t 5 -F -s ...

  5. Windows操作系统线程调度耍起来

    Windows等常用操作系统都不是实时性操作系统,所谓不是实时性,意思是你写的程序放在这个操作系统上面运行,当程序需要睡眠2秒时,你的程序睡眠的可能不是2秒,而是2秒后能变为可调度状态,但是如果系统程 ...

  6. js转盘游戏

    1----- @-webkit-keyframes spin { 0%   { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg) ...

  7. vue简单实例代码

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  8. 实现自己的MVC AJAX框架计划

    最近看了一下设计自己框架的文章,所以也想自己去实现一个小框架,用于以后的项目中,只求方便, 需要参考各位前辈的代码,或者直接copy过来为我所用,哈哈,想想都开心. 不过,要写个好的框架肯定不容易,现 ...

  9. Ant将Jmeter的jtl文件转为html文件报“前言中不允许有内容”

    ant执行jmeter的脚本的时候提示“Fatal Error! 前言中不允许有内容” 解决办法: 在jmeter的bin目录中找到jmeter.properties: 将文件中#jmeter.sav ...

  10. 使用PROC TRANSPOSE过程步对数据集进行转置时如何保持日期变量的时间顺序

    有一个数据集如下所示: 如果直接进行转置. SAS程序: proc transpose data=test out=outx1 (drop=_name_); by id; var amount; id ...