微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

webpack css加载和图片加载的方法示例

css加载器

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

加载这些资源我们要在module属性定义这些加载配置(指定加载器)。

在module属性中,通过定义loaders定义加载器,其属性值是一个数组,每一个成员代表一个配置。

  • 通过test定义匹配的规则(正则表达式)
  • 通过loader定义加载器,可以通过!级联多个加载器

加载css是要两个加载器,一个是style-loader,一个css-loader样式文件认加载到head里面。

我们来看一个小例子

rush:plain;"> |__static   |__css     |__app.css   |__app.js |__ index.html |__webpack.config.js

app.css

rush:css;"> h1{ background:red; width:100px; height:100px; color:blue; }

app.js

rush:js;"> require('./css/app.css') document.write('

hello connie

')

index.html

rush:xhtml;"> <Meta charset="UTF-8"> Title

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐