webpack的使用(3) ----模块加载器以及webpack打包多个包

本文介绍如何使用Webpack配置css-loader和style-loader处理CSS文件,并通过具体示例演示如何正确引入和应用样式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述
a.js

   alert('hello world');

b.js

require(./css/cs.css)
var str = require("./a.js")
alert(str)

cs.css

div{
    color:blue;
}

index.html

<body>
        <script src="bundle.js">
        </script>
        <div>hello world</div>
    </body>

执行:这里写图片描述
由执行结果可以看出:打包css文件会解析错误,这是因为webpack默认只能打包Js,对于css需要加载器的支持。
二:模块加载器
1.安装模块加载器语法格式:
npm install xxx-loader –save-dev
常用:html、css、jsx、coffee、jade、less、sass、style
css-loader
style-loader
html-loader
分别处理css文件和css样式以及html文件。
2. 这里我们先安装这两个loader
npm install css-loader –save-dev
npm install style-loader –save-dev
这里写图片描述
这里写图片描述
如果安装失败可以使用淘宝镜像(cnpm bug较多,移植性不好)
cnpm install css-loader –save-dev
cnpm install style-loader –save-dev
3.完成所有准备工作后还需要对原来文件进行修改
b.js中requirecss部分修改如下

     require("style-loader!css-loader!./css.css");  

注意:(1)style-loader!css-loader!是固定结构,代表后面文件使用这两个loader来处理。
(2)规定两个loader的顺序必须如上所示,先处理文件,然后处理里面样式的意思。webpack从右向左使用loader.
4.执行
webpack b.js bundle.js
这里写图片描述
成功后访问index.html可以看到css起作用了。
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值