Webpack中的oneOf
配置是用于对不同类型的文件进行不同的处理方式的配置项。在Webpack
中,我们可以通过loader
来对不同类型的文件进行处理,例如通过babel-loader
将ES6
转换成ES5
,通过sass-loader
将scss
文件转换成css
文件。但是在实际应用中,不同类型的文件可能需要不同的处理方式,比如当我们处理JS
文件时,可能需要将JS
文件进行压缩、代码分割等操作,但是对于图片、字体等静态资源,可能只需要将其复制到打包目录即可。
这时候就需要使用oneOf
配置项了。通过oneOf
,我们可以定义一组loader
和配置项,当文件匹配对应的规则时,就会按照这组loader
和配置项来进行处理,而不会继续往后匹配其他的loader
。例如:
{
module: {
rules: [
{
// 当一个文件被匹配到其中一组规则时,就会使用对应的loader和配置项进行处理,而不会再继续匹配其他的规则
oneOf: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
fallback: 'file-loader',
},
},
],
},
{
exclude: /\.(js|mjs|jsx|ts|tsx)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
],
},
],
},
}
这里配置了三组loader和配置项,分别用于处理JS文件、图片、其他静态资源。当一个文件被匹配到其中一组规则时,就会使用对应的loader和配置项进行处理,而不会再继续匹配其他的规则。这可以节省打包时间,提高打包效率。