添加Webpacker自定义loader后运行异常的问题咨询

• merge参数顺序错误：Webpacker 6提供的merge方法遵循右配置优先的合并规则，当前将自定义配置作为第一个参数、Webpacker内置默认配置作为第二个参数，会导致内置的loader规则、扩展名识别规则被自定义配置覆盖，原本支持的Angular、JS/TS等文件的解析逻辑直接失效。
• resolve.extensions配置逻辑错误：直接全量赋值extensions: ['.haml']会替换掉默认的扩展名列表，Webpack无法识别.js、.ts、Angular专用扩展名等常规模块文件，最终触发Cannot read properties of undefined报错。

1. 调整merge的参数顺序，将Webpacker内置默认配置放在第一个参数，自定义配置放在第二个参数，保证自定义配置是增量合并而非覆盖原有配置。
2. 优化resolve.extensions的配置写法，避免全量替换原有扩展名列表。

修正后的配置代码如下：

// config/webpack/rules/haml.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.haml$/,
        loader: 'haml-haml-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.haml']
  }
}

// config/webpack/base.js
const { webpackConfig, merge } = require('@rails/webpacker')
const hamlConfig = require('./rules/haml')

module.exports = merge(webpackConfig, hamlConfig)

以上规则适用于所有自定义loader的添加场景，调整后即可避免原有应用文件加载失败的问题。

内容的提问来源于stack exchange，提问作者Semen Shekhovtsov