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

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. 2.8 break和continue

    一.区别: break:终止整个循环. continue:中止一次循环,进入下一次循环. 1.1 break: public class Test14{ public static void main ...

  2. 学习笔记DL006:特征分解，奇异值分解

    特征分解. 整数分解质因素. 特征分解(eigendecomposition),使用最广,矩阵分解一组特征向量.特征值.方阵

  3. KMeams算法应用：图片压缩与贝叶斯公式理解

    from sklearn.datasets import load_sample_image import matplotlib.pyplot as plt from sklearn.cluster ...

  4. 汇编实验一 查看CPU和内存，用机器指令和汇编语言指令编程

    在装完DosBox环境之后,就可以用debug模式进行汇编指令的编程了. 实验内容:      首先用a指令进行数据的储存,然后用t命令进行调试. 可以发现ax,bx在不同的命令下发生了改变,cs的地 ...

  5. Linux----------samba服务的安装使用及简介

      一.Samba简介 Samba是在linux和Unix系统上实现SMB协议的一个免费软件,由服务器端和客户端程序组成. Samba与nfs的不同,Samba比nfs多支持Windows SMB ( ...

  6. Asteroids 爆破彗星

    发售年份 1979 平台 街机 开发商 雅达利(Atari) 类型 射击 https://www.youtube.com/watch?v=WYSupJ5r2zo

  7. 创建一个dynamics 365 CRM online plugin (七) - plugin当中的Impersonation角色

    我们之前创建的plugin都是使用default的 run in User's Context. 理解就是使用正在登陆的security context用户信息 那有个问题,如果当前用户的securi ...

  8. Vue01

    1.vue.js库的下载 vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: 中文:https ...

  9. 剑指offer 8.递归和循环 跳台阶

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果).   解题思路一: a.如果两种跳法,1阶或者2阶,那么假定第一次跳的是 ...

  10. c# 程序只能运行一次(多次运行只能打开同一个程序)

    转自:https://social.msdn.microsoft.com/Forums/zh-CN/6398fb10-ecc2-4c03-ab25-d03544f5fcc9/2291420309357 ...