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