webpack css loader

最新推荐文章于 2024-04-25 23:12:12 发布

梅花十三儿

最新推荐文章于 2024-04-25 23:12:12 发布

阅读量795

点赞数

文章标签： webpack css 前端

本文链接：https://blog.csdn.net/Android062005/article/details/126483282

版权

我们新建一个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'}]}]}
}

简写

如果这个文件只需要被一个loader解析，并且没有其他配置就可以简写。

{test:/\.css$/,loader:'css-loader'
}

{test:/\.css$/,use:['css-loader']
}

梅花十三儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack css loader

我们新建一个login.js文件，作为一个组件。这里定义了一个函数，函数中创建了h2标签，然后给标签中添加文字、还有类名className，最后把这个dom返回。最后通过向标签中添加login函数生成的dom。
复制链接

扫一扫