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中使用的箭頭函數未被轉化