Webpack4自定义Loader问题：loaderUtils.getOptions返回null，this对象为空

嘿，我之前也碰到过一模一样的问题！核心原因其实很简单——你用了箭头函数来导出loader，而Webpack需要给loader绑定它自己的上下文对象，箭头函数会捕获外层的this（在Node模块环境里就是空/undefined），导致loaderUtils.getOptions(this)拿不到正确的上下文。

下面是具体的解决步骤：

1. 把loader导出改成普通函数 #

把原来的箭头函数换成普通函数，这样Webpack才能正确把上下文绑定到this上：

修改前：

const loaderUtils = require('loader-utils');
module.exports = (source) => {
  const options = loaderUtils.getOptions(this);
  console.log(...);
  // 你的逻辑
}

修改后：

const loaderUtils = require('loader-utils');
// 改用普通函数导出，Webpack会自动绑定上下文到this
module.exports = function(source) {
  const options = loaderUtils.getOptions(this);
  console.log('拿到的options:', options);
  // 这里继续你的manifest处理逻辑
  const originalManifest = JSON.parse(source);
  // 合并options到原始manifest
  const finalManifest = { ...originalManifest, ...options };
  return JSON.stringify(finalManifest, null, 2);
}

2. 确保Webpack配置里正确传入了options #

检查你的webpack配置文件，确认loader的options已经正确配置：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /manifest\.json$/,
        use: [
          {
            loader: './path/to/manifest-loader.js',
            options: {
              // 你的自定义配置项
              version: '1.2.0',
              description: 'My Awesome Chrome Extension',
              permissions: ['storage', 'activeTab']
            }
          }
        ]
      }
    ]
  }
}

3. Webpack 5+的额外提示 #

如果你用的是Webpack 5及以上版本，loaderUtils.getOptions已经被官方弃用了，推荐直接使用Webpack提供的this.getOptions()方法，不需要依赖loader-utils：

module.exports = function(source) {
  // Webpack 5+ 推荐写法
  const options = this.getOptions();
  console.log(options);
  // 后续逻辑...
}

额外注意：避免Babel转译破坏函数上下文 #

如果你用Babel转译你的loader代码，要确保配置里不会把普通函数转成箭头函数。可以在babel配置里指定目标为当前Node版本：

// .babelrc
{
  "presets": [
    ["@babel/preset-env", { "targets": { "node": "current" } }]
  ]
}

这样修改后，this就能正确获取到Webpack传入的上下文，loaderUtils.getOptions(this)（或this.getOptions()）就能拿到你配置的options对象了！

内容的提问来源于stack exchange，提问作者chez.mosey