Webpack在AngularJS中使用require()无法添加依赖，疑配置有误

这个问题的核心原因很明确：AngularJS的模块依赖需要的是模块名称字符串，而Webpack把库中的require()替换成__webpack_require__后，返回的是模块导出对象，不是AngularJS能识别的字符串依赖。

下面是具体的解决方案，分两种常用方式：

方案一：显式引入模块并使用字符串依赖 #

在你的应用主入口文件（比如app.js）中，先通过ES6 import加载所需模块，然后直接用AngularJS模块的字符串名称作为依赖：

import angular from 'angular';
// 先加载angular-formly，让它注册到AngularJS的模块系统
import 'angular-formly';
// 再加载模板库，它会自动依赖已注册的formly模块
import 'angular-formly-templates-bootstrap';

// 你的应用模块直接使用字符串形式的依赖名称
angular.module('yourAppName', ['formly', 'formlyBootstrap']);

这里要注意：

• angular-formly对应的模块名称是formly
• angular-formly-templates-bootstrap对应的模块名称是formlyBootstrap

方案二：通过Webpack ProvidePlugin全局暴露模块 #

如果希望更自动化地处理模块依赖，可以在Webpack配置中添加ProvidePlugin，确保模块被全局加载并注册：

const webpack = require('webpack');

module.exports = {
  // 其他Webpack配置项（entry、output等）...
  plugins: [
    new webpack.ProvidePlugin({
      angular: 'angular',
      // 让angular-formly全局可用，确保它被加载并注册到AngularJS
      'angular-formly': 'angular-formly'
    })
  ]
};

之后在入口文件中只需要引入模板库，再在应用模块中使用字符串依赖即可：

import angular from 'angular';
import 'angular-formly-templates-bootstrap';

angular.module('yourAppName', ['formly', 'formlyBootstrap']);

为什么原来的方式会失败？ #

你看到的库源码中的const ngModule = angular.module(ngModuleName, [require('angular-formly')]);，在CommonJS环境下require('angular-formly')会返回模块的导出对象，但AngularJS的模块依赖数组只接受字符串类型的模块名称。Webpack打包时把require替换成__webpack_require__(4)，这个调用返回的是模块对象，不是字符串，所以AngularJS无法识别这个依赖，导致注入失败。

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