oneOf一般用法
module的oneOf配置提高loader匹配效率，使用方法如下，匹配到一个loader后，后面的就不会再继续匹配了。
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
// //优先执行
enforce:'pre',
loader:'eslint-loader',
options:{
fix:true
}
},
{
//下面的loader只会匹配一个，处理性能更好
//注意：不能有两个配置处理同一种类型文件
oneOf:[
{
test:/\.css$/,
use:[...commenCssLoader]
},
{
test:/\.less$/,
use:[...commenCssLoader,'less-loader']
},
]
}
]
},
mini-css-extract-plugin使用oneOf
在维护一个支持react/vue框架的脚手架，需要mini-css-extract-plugin区分react和vue并提取样式文件
oneOf: [
// 匹配`<style lang="css|sass|scss|less|styl">` in Vue components
{
// vue的trunk filenmae包含vue参数
resourceQuery: /^\?vue/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: domain,
esModule: false,
}
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
url: false
}
},
'postcss-loader',
].concat(param)
},
// 处理react或者其他样式
{
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: domain,
}
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
url: false
}
},
'postcss-loader',
].concat(param)
},
上例的区别是react将esModule设true，而vue则设置为false。esModule可以使的webpack支持tree shaking。
