一、配置处理css文件的loader
在网页开发中 不推荐在页面中直接引入样式 有可能会产生多次请求问题:
<link rel="stylesheet" href="./css/index.css">
使用了Webpack之后 可在main.js中引入CSS样式表:
就像引入其它模块一样(但语法略有区别)
// 使用import语法导入CSS样式表
import "./css/index.css"
但 webpack默认处理不了后缀名为.css的样式表文件
因为webpack默认只能打包处理js类型的文件 并不能处理其它非js类型的文件
若要处理非js类型的文件 需要手动安装其各自合适的loader(加载器)
安装步骤:
-
1、在项目根目录输入
cnpm i style-loader css-loader -D
安装style-loader和css-loader这两个loader
-
2、安装好loader之后 修改webpack.config.js配置文件:
新增名为module的配置节点 用于配置所有第三方模块加载器(loader)
在该对象上有个rules属性 该属性是个数组 存放了所有第三方文件的匹配和处理规则
test属性表示用正则表达式进行匹配 匹配所有以.css结尾的文件
use属性表示前面匹配到的文件类型用指定的模块加载器(loader)进行处理
注:在1.x版本的webpack中 loader的后面可不带-loader后缀 但在2.x版本及以上必须带有-loader后缀
const path=require("path")
module.exports={
entry:path.join(__dirname,"./src/main.js"),
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
// 配置所有第三方模块加载器(loader)
module:{
// 所有第三方模块的匹配规则
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]} // 配置处理.css文件的第三方loader规则
]
}
}
Webpack处理第三方文件类型的过程:
webpack在进行打包的时候 会校验import导入的文件的类型
若为JS文件 则可以直接打包
但 若为其它类型的文件 例如CSS 则会根据其后缀名去webpack.config.js中的module的rules里寻找对应的匹配规则
若能找到 则调用相应的第三方模块(loader)进行打包
若找不到 则报错
loader(加载器)调用顺序:
若设置的匹配规则对应的loader不止一个 那么调用顺序是【从右到左】
例如:{test:/\.css$/,use:["style-loader","css-loader"]}
在这个例子中 会先调用css-loader 然后将处理完毕的结果交给style-loader进行进一步的处理
style-loader处理完毕之后 若前面还有loader 则再交给前面的loader进行处理 以此类推
若前面没有loader了 则交给webpack进行打包 最后合并到最终的JS文件(即bundle.js)中
二、配置处理less文件的loader
Less(Leaner Style Sheets)是一门向后兼容的css扩展语言
即css的扩展语言 大部分语法还是很相似的
导入:
// 使用import语法导入less样式表
import "./css/index.less"
下载相应的loader 然后进行配置:
-
1、在项目根目录输入
cnpm i less-loader less -D
安装less-loader和less这两个loader
(less-loader内部依赖于less)
-
2、修改webpack.config.js
由于less属于样式 因此必须调用用于处理样式的loader:style-loader和css-loader
顺序是style-loader","css-loader","less-loader
先使用less-loader将less样式处理为css样式 再由css-loader和style-loader进行处理
const path=require("path")
module.exports={
entry:path.join(__dirname,"./src/main.js"),
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
// 配置所有第三方模块加载器(loader)
module:{
// 所有第三方模块的匹配规则
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}, // 配置处理.css文件的第三方loader规则
// 由于less属于样式 因此必须使用style-loader和css-loader
{test:/\.less$/,use:["style-loader","css-loader","less-loader"]} // 配置处理.less文件的第三方loader规则
]
}
}
三、配置处理scss文件的loader
Sass是一款强化CSS的辅助工具,它在CSS语法的基础上增加了变量(variables)、嵌套(nested rules)、混合(mixins)、导入(inline imports)等高级功能,这些拓展令CSS更加强大与优雅。
简单来说 也是css的扩展
导入:
// 使用import语法导入scss样式表
import "./css/index.scss"
同样 下载相应的loader 然后进行配置:
-
1、在项目根目录输入
cnpm i sass-loader node-sass -D
安装sass-loader和node-sass这两个loader
(sass-loader内部依赖于node-sass)
-
2、修改webpack.config.js
由于less属于样式 因此必须调用用于处理样式的loader:style-loader和css-loader
顺序是style-loader",“css-loader”,"less-loader 因为要先使用less-loader将less样式处理为css样式 再由css-loader和style-loader进行处理
const path=require("path")
module.exports={
entry:path.join(__dirname,"./src/main.js"),
output:{
path:path.join(__dirname,"./dist"),
filename:"bundle.js"
},
// 配置所有第三方模块加载器(loader)
module:{
// 所有第三方模块的匹配规则
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}, // 配置处理.css文件的第三方loader规则
// 由于less属于样式 因此必须调用style-loader和css-loader
{test:/\.less$/,use:["style-loader","css-loader","less-loader"]}, // 配置处理.less文件的第三方loader规则
{test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]} // 配置处理.scss文件的第三方loader规则
]
}
}
总结:
简单来说 配置loader就两步
首先 下载对应的loader 然后在webpack的配置文件中配置匹配规则即可