手机版

网页包css加载和图片加载方法的例子

时间:2021-08-30 来源:互联网 编辑:宝哥软件园 浏览:

Css加载程序

在webpack中,所有的资源(js文件、css文件、模板文件、图片文件等。)被视为一个模块,因此可以加载许多资源。

为了加载这些资源,我们需要在模块属性中定义这些加载配置(指定加载器)。

在模块属性中,加载器是通过定义加载器来定义的,它的属性值是一个数组,每个成员代表一个配置。

匹配规则(正则表达式)由测试定义,加载器由加载器定义。级联多个加载器来加载css需要两个加载器,一个是样式加载器,另一个是默认情况下css加载器样式文件加载到head中。

让我们看一个小例子

| _ _ static | _ _ CSS | _ _ app . CSS | _ _ app . js | _ _ index.html | _ _ web pack . config . jsapp . CSS

h1 { background:red宽度width:100px高度:100 px;颜色:蓝色;}app.js

要求('。/CSS/app . CSS ')document . write(' h1 hello connie/h1 ')index . html

!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title/head dyscript type=' text/JavaScript ' src=' http : test/dest . js '/script/body/html webpack . config . js

module.exports={entry: '。/static/app.js ',output 3360 { filename 3360 ' dest/dest . js ' },module: {loaders 3360 [{//]配置正则表达式,并搜索。css文件test3360/\。符号级联加载器: '样式加载器!Css-loader'}] }}注意:测试参数是正则表达式,没有引号。如果写成test:"/。css$/。css $/,它会报错!

图片加载器

在webpack中,图像资源也可以看作一个模块,因此您也可以使用require来加载它们。

但是要加载这些图片,我们需要一个图片加载器,叫做url加载器

图像加载是特殊的,有两种加载方法

嵌入:将图片嵌入文件中(图片将转换为base64格式),并将图片作为资源(通过图片路径引入)嵌入webpack中。我们可以在url加载器中定义一个限制参数来决定引入它的方式。

语法url加载程序?极限=2048?Limit,用来定义加载器的参数配置,意思是2048的图片大小限制为B,所以2048表示2KB,也就是说当图片小于2Kb的时候,我们加载嵌入的图片。

当图片大于2kb时,我们采用外链。

app.css

div { height: 200px宽度: 200 px;} . test 1 { background-image : URL('。/images/test1 . png ');} . test 2 { background-image : URL('。/images/test2 . jpg ');} . test 3 { background-image : URL('。/images/test3 . png ');}webpack.config.js

module.exports={entry: '。/static/app.js ',output 3360 { filename 3360 ' dest/dest . js ' },module : { loaders 3360[{//picture loader test 3360/\。(png | jpg |。limit=2048' },{ test:/\。css$/,loader:'style-loader!需要安装Css加载器' }] }} url加载器和文件加载器来加载图像

由NPM安装网址加载器NPM安装文件加载器再次检查dest.js

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:网页包css加载和图片加载方法的例子是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。