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

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

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