如何阻止webpack重写import()以使用浏览器原生内置import()方法？

你可以通过以下两种常用方式绕过webpack对import()的静态解析，直接使用浏览器原生的动态导入能力：

方案1：使用webpack内置魔法注释（最简便） #

在import()内的最前面添加/* webpackIgnore: true */注释，webpack会直接跳过对该导入语句的处理，保留原生导入逻辑：

// 示例代码
async function loadTargetFunction(filePath, funcName) {
  // 该import语句不会被webpack编译替换
  const remoteModule = await import(/* webpackIgnore: true */ filePath)
  return remoteModule[funcName]
}

// 调用示例
const myFunction = await loadTargetFunction(aConstructedPath, '你已知的函数名')
myFunction()

方案2：通过动态执行获取原生import #

如果不想依赖webpack的魔法注释，可以通过eval绕开webpack的静态代码分析，直接拿到浏览器原生的import方法：

// 提前获取原生导入方法，webpack不会解析eval内的内容
const nativeImport = (0, eval)('import')

async function loadTargetFunction(filePath, funcName) {
  const remoteModule = await nativeImport(filePath)
  return remoteModule[funcName]
}

注意事项 #

• 你加载的远程.js文件必须是标准ES模块格式，才能被原生import()正常解析，若文件为UMD/CommonJS格式，可改用动态创建script标签的方式加载。
• 需确保远程文件所在服务配置了正确的CORS跨域响应头，否则浏览器会拦截请求。

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