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

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. 解决: Homestead 环境下, yarn install --no-bin-links, NPM run dev, 命令报错

    执行以下命令: 1 $ rm -rf node_modules 2 $ yarn config set registry http://registry.cnpmjs.org 3 $ yarn ins ...

  2. 安装Kali linux

    Kali介绍 Kali Linux是基于debian的Linux发行版, 设计用于数字取证操作系统.由Offensive Security Ltd维护和资助.最先由Offensive Security ...

  3. 2019嘉韦思杯线上初赛writeup

    1 土肥原贤二 看到页面怀疑是sql注入,写了个4'进去就发生报错.could not to the database You have an error in your SQL syntax; ch ...

  4. maya_关于脚本编辑器导入python模块

    import sys for p in sys.path: print p rigDir = 'C:\Users\lenovo\Documents\maya\scripts\python\rigLib ...

  5. Actifio如何保护和管理Oracle-带外篇

    引言 本文提供CDS带外环境下相关配置,保护和恢复Oracle的所需步骤. 目的是提供Oracle数据库配置前的详细说明,Actifio环境下发现和配置Oracle数据库,执行还原和恢复,以及配置Or ...

  6. java web(一):tomcat服务器的安装和简单介绍，与eclipse关联

    一:下载tomcat安装包和安装 这个百度一下就可以了. 安装完以后进入tomcat的安装路径查看 如图所示:有几个目录简单介绍下 bin目录:   存放运行tomcat服务器的相关命令. conf目 ...

  7. JSON和JSONP，浅析JSONP解决AJAX跨域问题

    说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...

  8. elasticsearch -- kibana安装配置

    Kibana 是为Elasticsearch设计的开源分析和可视化平台,你可以使用 Kibana 来搜索,查看存储在 Elasticsearch 索引中的数据并与之交互.你可以很容易实现高级的数据分析 ...

  9. 配置Tomcat使用https协议(配置SSL协议)

    配置Tomcat使用https协议(配置SSL协议) 2014-01-20 16:38 58915人阅读 评论(3) 收藏 举报 转载地址:http://ln-ydc.iteye.com/blog/1 ...

  10. h5交互动画如何制作

    最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...