账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack module rules 中配置相关的 loader 规则 如果同时符合多个条件 是都执行还是只会执行最近的?
    33
    0

    问题描述

    webpack module rules 中配置相关的 loader 规则 如果同时符合多个条件 是都执行还是只会执行最近的?

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    module: {
      rules: [
        {
          // 命中 JavaScript 文件
          test: /\.js$/,
          // 用 babel-loader 转换 JavaScript 文件
          // ?cacheDirectory 表示传给 babel-loader 的参数,用于缓存 babel 编译结果加快重新编译速度
          use: ['babel-loader?cacheDirectory'],
          // 只命中src目录里的js文件,加快 Webpack 搜索速度
          include: path.resolve(__dirname, 'src')
        },
        {
          // 命中 JavaScript 文件
          test: /\.js$/,
          // 用 ts-loader 转换 JavaScript 文件
          use: ['ts-loader'],
          // 只命中src目录里的js文件,加快 Webpack 搜索速度
          include: path.resolve(__dirname, 'src')
        },
      ]
    }

    两个配置项都匹配了 .js 文件 是两个 loader 都会执行?还是只会执行一个?那是哪一个呢?

    你期待的结果是什么?实际看到的错误信息又是什么?

    查阅了相关官方文档没有相关的描述,能不能描述下结论的出处?

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 为欢几何 普通会员 1楼

      在webpack的module rules中,可以使用if语句来配置多个loader规则。如果同时符合多个条件,webpack会按照优先级来执行,即最近的规则先执行。

      以下是一个示例:

      javascript module.exports = { // ... module: { rules: [ { test: /\.js$/, use: ['babel-loader'], include: ['src', 'test'] }, { test: /\.css$/, use: ['css-loader'], include: ['src', 'test'] }, { test: /\.json$/, use: ['json-loader'], include: ['src', 'test'] } ] }, // ... };

      在这个例子中,如果在include中包含的路径下存在匹配的文件,那么后面的loader规则会先执行。如果在include中不包含的路径下不存在匹配的文件,那么后面的loader规则不会执行。

      注意,这个规则只适用于匹配的文件,不适用于文件的引用。例如,它不会检查一个script标签中是否引用了另一个script标签,也不会检查一个style标签中是否引用了另一个style标签。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部