webpack css loader

最新推荐文章于 2025-06-25 14:43:59 发布

原创最新推荐文章于 2025-06-25 14:43:59 发布 · 886 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #css #前端

本文介绍了如何在JavaScript中创建一个简单的login组件，并将其与CSS模块结合。作者展示了如何在login.js中定义DOM并引入并处理CSS模块，遇到的webpack配置问题及解决方法，包括安装css-loader和调整webpack配置来正确处理CSS文件。

我们新建一个login.js文件，作为一个组件。

这里定义了一个函数，函数中创建了h2标签，然后给标签中添加文字、还有类名className，最后把这个dom返回。最后通过document.body.appendChild向<body>标签中添加login函数生成的dom。

// login.js
function login(){const oH2 = document.createElement('h2')oH2.innerHTML = '我的天啊'oH2.className = 'title'return oH2
}
document.body.appendChild(login())

新建css

.title{color: aqua;
}

然后在login.js文件中引入login.css。此时的css，被当成模块处理。

import './css/login.css'
function login(){const oH2 = document.createElement('h2')oH2.innerHTML = '我的天啊'oH2.className = 'title'return oH2
}
document.body.appendChild(login())

再次进行打包npm run build，报错如下：缺少loader。默认情况下，webpack不能处理css文件，因此需要添加css的对应loader进行一个转换。

使用loader

需要安装css-loader

npm install --save-dev css-loader

注意这里用到了 --save-dev，这是把css-loader加到devDependencies(开发依赖)中，在我们的生成环境中就不需要这个包了。

添加配置

module配置项用于存放匹配规则，以及相应规则需要的loader。
rules:有s说明我们后面会有多个规则，所以对应的值是一个数组。webpack默认会处理js和json。其他类型就都不认识了。如：图片、字体、样式等。
test : 一般后面是正则表达式，我们先写出 /.css/，然后.在正则表达式中会有特殊含义所以需要进行转义，就变成了 /\.css/ ，并且那我们不希望将类似于 xxx.css.js这种文件被认为是css文件而被css-loader处理。所以使用 $作为结束标识(正则表达式) 最后就是/\.css$/
然后怎么知道css文件使用什么loader解析？使用use，同样也可能需要多个loader进行解析，所以use对应也是数组。
use数组中，是对象，如下指定的loader是'css-loader'

const path = require('path')
module.exports ={entry: './src/index.js',output: {filename: 'build.js',path: path.resolve(__dirname,'dist')},module:{rules:[{test:/\.css$/,// 可能有多个loaderuse:[{loader: 'css-loader'}]}]}
}