处理样式(CSS)资源
Css
下载包
npm i css loader -D
npm i style-loader -D
配置
test: /\.css$/, //只检测.css文件
use: [
//执行顺序从右到左(从下到上)
"style-loader",//将js中的css通过创建style标签添加到html中生效
"css-loader",//将css资源编译成commonjs的模块到js中
],
less
下载包
npm i less less-loader -D
功能
将less资源转化成css
配置
test: /\.less$/, //只检测.less文件
//loader: 这个属性代表只能使用一个loader,下面的use可以使用多个
use: [
//执行顺序从右到左(从下到上)
"style-loader", //将js中的css通过创建style标签添加到html中生效
"css-loader", //将css资源编译成commonjs的模块到js中
"less-loader",//将less资源编译成css
],
sass
下载包
npm install sass-loader node-sass webpack --save-dev
配置
test: /\.s[ac]ss$/, //只检测.sass或scss文件
use: [
"style-loader",
"css-loader",
"sass-loader",//将sass资源编译成css
],
stylus
下载包
npm i stylus-loader -D
npm i stylus -D
配置
test: /\.styl$/, //只检测.sass或scss文件
use: [
"style-loader",
"css-loader",
"stylus-loader", //将stylus资源编译成css
],
处理图片资源
不用下载包,webpack自带了
配置
test:/\.(png|jpe?g|gif|webp)$/,
type:"asset",
parser: {
dataUrlCondition: {
//小于10kb的图片转base64
//优点:减少请求数量 缺点:体积更大
maxSize: 200* 1024,
}
}