在Webpack构建的React应用中动态导入任意JS模块问题

方法1：用Webpack魔法注释跳过静态分析 #

Webpack 5及以上支持/* webpackIgnore: true */注释，加上之后Webpack就不会处理这个import()，直接保留浏览器原生的动态导入逻辑：

import(/* webpackIgnore: true */ '/js').then((mod) => {
  // 处理导入的模块
  console.log(mod);
});

方法2：直接调用浏览器原生import #

通过window.import直接访问浏览器的原生动态导入函数，绕开Webpack的封装：

window.import('/js').then((mod) => {
  // 处理模块
});

方法3：动态创建script标签加载模块 #

如果外部模块不是ES模块，或者需要更细致的加载控制，可以用动态创建script标签的方式实现：

function loadExternalModule(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = url;
    
    script.onload = () => {
      // 要是模块暴露了全局变量，直接通过window访问就行
      resolve(window.ExportedModule);
    };
    script.onerror = (err) => reject(err);
    
    document.head.appendChild(script);
  });
}

// 调用示例
loadExternalModule('/js').then((mod) => {
  console.log('模块加载完成:', mod);
});

你碰到的问题核心是Webpack会扫描代码里的import()，试图把它纳入打包体系，但浏览器控制台里的import()是直接调用原生API，不受Webpack管控。上面的方法都能绕开Webpack的处理，实现任意URL的动态导入。

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