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

最新推荐文章于 2024-07-20 20:03:08 发布

Z编程

最新推荐文章于 2024-07-20 20:03:08 发布

阅读量942

点赞数 12

分类专栏： webpack 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_45636198/article/details/136606978

版权

webpack 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文介绍了如何在Webpack项目中不通过css-loader直接打包CSS文件，包括创建CSS文件、安装和配置css-loader，以及在HTML中使用打包后的CSS。通过loader规则，css-loader将CSS转换为JS并插入到HTML中作为style标签。

摘要由CSDN通过智能技术生成

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>

Z编程

关注

12
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
webpack5零基础入门-3使用webpack处理样式资源

style-loader：将js中的css通过创建style标签的形式添加到html文件中。在main.js中引入(不进行引入不会进行打包，因为打包的入口是main.js)css-loader：将css资源编译成commonJs资源到JS中。报错无法识别file.css，需要loader来处理css文件类型。use的执行顺序是从右到左，在后面的loader先执行。use表示对检测到的文件使用哪些loader。可以看到css文件被创建成style标签了。rules数组中的每个对象表示一个规则。
复制链接

扫一扫