提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

webpack css loader

webpackCSS loader
2023-06-13 09:16:41 时间

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

新建一个css文件夹，再新建一个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$/,
                // 可能有多个loader
                use:[
                        {
                            loader: 'css-loader'
                        }
                ]
            }
        ]
    }
}
复制代码

简写

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

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

相关文章