Rule.resourceQuery（通过路径参数指定loader匹配规则）
1. 说明
在 webpack 4 中，Rule.resourceQuery 是一个用于根据文件路径中的 查询参数（query string） 来匹配资源的配置项。它允许你针对带有特定查询条件的文件（如 file.css?inline 或 image.png?raw）应用不同的加载规则
2.示例
- 场景 1：处理带有 ?inline 参数的 js文件
目标：将 aa.js?inline 里使用的箭头函数，通过babel-loader转为函数声明方式 - 配置：
- webpack.config.js
const path = require('path');
module.exports = {entry: "./src/index.js",output: {path: path.resolve(__dirname, 'dist1'),publicPath: "/dist1/"},module: {rules: [{resourceQuery: /inline/,use: ['babel-loader'], // 应用 Babel 转译}],},optimization: {minimize: false}
}
- index.js
import a from './a.js'
import aa from './js/aa.js?inline'a()
aa()
- js/aa.js
const aa = () => {console.log('this is an anarow faunction')
}export default aa
- a.js
const a = () => {console.log('this is a')
}export default a
3. 结果验证
aa.js中的箭头函数打包后被转为了函数声明方式，a.js中使用的箭头函数未被转化