webpack开箱就有的能力是只能对js和json文件进行处理,如果相要对css、less等样式文件进行打包,那么使用loader对这些文件进行转换,然后再添加到依赖图中被打包。
接下来,演示如何打包css、less文件:
1.新建一个index.css
文件
html,body{
font-size: 16px;
padding:0;
margin:0;
background-color: pink;
}
2.新建一个index.less
文件
#title{
color: blue;
}
3.在index.js
引入这两个样式文件
4.在webpack中我们在loader
中对这两种文件进行配置:(重点关注loader
即可)
后面会讲一下css-loader
和style-loader
同时我们要下载相应的loader,
npm i style-loader css-loader less-loader -d
,注意loader的执行顺序,以对css文件的处理为例,它是用css-loader
再用style-loader
const {resolve} = require('path')
module.exports={
//入口起点,webpack从这个文件开始往下寻找整个工程模块之间的依赖关系
entry:'./src/index.js',
// webpack最后打包生成的bundle放在什么位置,并怎么命名这个bundle
output:{
filename:'built.js',
path:resolve(__dirname,'build') //一般会写绝对路径,避免出错,__dirname指代当前的文件路径
},
//!!!!!loader的配置!!!!focuse here!!!!
{
test:/\.(less)$/,
use:[
// 对cssloader的数组进行解析创建style标签,并插入到dom中(head标签中)
'style-loader',
// 解析css模块,是一个数组,存储样式模板字符串
'css-loader',
// 将less文件解析成css文件
'less-loader'
]
}
},
//根据相应的模式,webpack采取不同的方式进行优化,默认值是production
mode:'development' //测试环境下都使用开发模式,因为生产模式会压缩
}
css-loader
css-loader
会生成一个js数组,如下图所示,这个是对index.css
的处理:
如果想要更仔细的了解css-loader和style-loader对css文件的处理,推荐看这篇文章:https://www.jianshu.com/p/d2470f719fee
style-loader
style-loader可以会创建一个
style标签
插入到index.html
中(第5步已经执行了条件下),可以打开控制台看到html
结构:5.最后执行webpack命令进行打包,可以创建一个index.html
引入build.js
,可以看到样式显示出来了: