我们新建一个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文件夹,再新建一个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进行一个转换。
需要安装css-loader
npm install --save-dev css-loader
注意这里用到了 --save-dev
,这是把css-loader
加到devDependencies
(开发依赖)中,在我们的生成环境中就不需要这个包了。
/.css/
,然后.
在正则表达式中会有特殊含义所以需要进行转义 ,就变成了 /\.css/
,并且那我们不希望将类似于 xxx.css.js
这种文件被认为是css文件而被css-loader处理。所以使用 $
作为结束标识(正则表达式) 最后就是/\.css$/
'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']
}