企业网站模板免费版_上海市政大厅官网_手机管家一键优化_域名反查

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