webpack5零基础入门-3使用webpack处理样式资源

1.不使用css-loader直接进行打包

1.1创建css文件

复制代码
.red{
    color: red;
}

在main.js中引入(不进行引入不会进行打包,因为打包的入口是main.js)

复制代码
import sum from "./js/sum";
import count from "./js/count";
//要想webpack打包资源,必须引入该资源
import "./css/file.css"
console.log(count(1, 2));
console.log(sum(1, 2, 3, 4, 5))

执行npx wepack

报错无法识别file.css,需要loader来处理css文件类型

2.安装css-loader

2.1安装loader

css-loader文档 ​​https://webpack.docschina.org/loaders/css-loader/​

npm install --save-dev css-loader

2.2配置规则loader

复制代码
  /**加载器 */
    module: {
        rules: [
            //loader的配置
            {
                /**test 代表要检测的文件 */
                test: /\.css$/i, //只检测.css文件
                use: ['style-loader', 'css-loader'],//对检测到文件使用哪些loader
            }
        ]
    },

rules数组中的每个对象表示一个规则

test表示要检测的文件

use表示对检测到的文件使用哪些loader

use的执行顺序是从右到左,在后面的loader先执行

css-loader:将css资源编译成commonJs资源到JS中

style-loader:将js中的css通过创建style标签的形式添加到html文件中

执行npx webpack命令

可以看到css文件被创建成style标签了

在html文件中使用样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <script src="../../dist/dist.js"></script>
    <h1>hell webpack</h1>
    <div class="red"></div>
</body>
</html>
相关推荐
前端拿破轮17 分钟前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
止观止20 分钟前
XSS 攻击详解:原理、类型与防范策略
前端·xss
用户479492835691525 分钟前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手43 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate1 小时前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛1 小时前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒2 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞2 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧2 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试