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中使用的箭头函数未被转化