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

相关推荐
UIUV7 分钟前
CSS 高级动画学习笔记 —— 从 “亲吻小球” 案例看 CSS 核心技术
前端·css
星链引擎18 分钟前
智能聊天机器人 技术架构核心实现与场景化落地
前端
yoyoma19 分钟前
彻底搞懂 JavaScript 闭包:原理、陷阱与内存优化全解析
前端·javascript
茄汁面21 分钟前
Angular(TypeScript ) 中基于 ExcelJS 实现导入模板下载功能(带样式与数据验证)
前端·javascript·node.js
前端九哥22 分钟前
老板:就是你小子删光了try-catch?
前端·javascript
杰出的胡兵22 分钟前
2v1带您实战12nm高级数字后端
前端·soc·数字后端·数字ic后端·芯片设计全流程培训
Achieve前端实验室22 分钟前
深入浅出 ES Module
前端·javascript·前端框架
炳子22 分钟前
小程序地图组件(map)中使用全屏预览图片(previewImage)的问题解决方案
前端
Onion22 分钟前
BroadcastChannel 使用:优缺点、场景示例与最佳实践
前端·javascript
东东23324 分钟前
搭建 Vite + React 服务端渲染(SSR)环境
前端·javascript·react.js