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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发7 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码8 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记8 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante9 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript