使用Webpack打包RequireJS AMD代码时出现'define cannot be used indirect'错误如何解决？

安全阿岳

2026-5-13

解决Webpack打包AMD代码时的define cannot be used indirect错误

我太懂这个坑了！当用Webpack打包基于RequireJS的AMD代码时，Webpack默认会把define函数替换成它自己的内部实现，而不是用全局RequireJS提供的那个，这就导致了define cannot be used indirect的错误。既然你没法把整个项目改成ES模块，那咱们就顺着AMD的路子来调整配置：

解决步骤

配置Webpack输出为AMD格式
修改你的Webpack配置，在output字段里添加libraryTarget: 'amd'，这会让Webpack把打包后的代码输出为标准的AMD模块，直接复用全局的define函数，而不是自己搞一套：

const path = require("path");
module.exports = {
 entry: { app: './app/js/app/main.js' },
 output: { 
   path: path.resolve(__dirname, 'app/build'), 
   filename: 'main.js',
   libraryTarget: 'amd' // 这是核心配置！
 },
 module: { 
   rules: [{ 
     test: /\.js?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
       presets: ['@babel/env', { modules: false }] 
     } 
   }] 
 },
 // 可选优化：把第三方依赖交给RequireJS加载，不打包进bundle
 externals: {
   'lib/angular': 'lib/angular',
   'lib/has': 'lib/has'
 }
};

调整Babel配置保留AMD语法
@babel/preset-env默认会把所有模块语法转成CommonJS，这会直接破坏你的AMDdefine结构。所以一定要在preset配置里加上modules: false，让Babel原封不动保留你的AMD代码：
```
// 对应Webpack配置里babel query的这部分
presets: ['@babel/env', { modules: false }]
```
确认RequireJS配置路径正确
你已经在RequireJS的packages里把app指向了Webpack打包的build目录，这一步没问题，但要确保打包后的main.js确实生成在这个目录下，路径别写错就行。