这篇写的很详细
https://segmentfault.com/a/1190000012718374#articleHeader9
主要的配置项:
test:必须 匹配需要处理的文件的扩展名
use:必须 需要使用的模块
include/exclude:非必须 需要处理的文件夹/不需要处理的文件夹
options:非必须 扩展项
Loader 的执行顺序是由后到前的
有三种写法:
// 1.use
module:{
rules:[
{
test:/.css$/,
use:['vue-style-loader','css-loader']
}
]
}
//2.loader
module:{
rules:[
{
test:/.css$/,
loader:['vue-style-loader','css-loader']
}
]
}
//3.use +loader
module:{
rules:[
test:/.css$/,
use:[
{
"loader":"vue-style-loader "
},{
"loader":"css-loader",
options:{
minimize:true
}
}
]
]
}
常见的写法:
use:['vue-style-loader','css-loader?minimize]
中的minimize
告诉 css-loader
要开启 CSS 压缩。
https://github.com/webpack-contrib/css-loader.git