如何让Webpack忽略依赖包中的动态导入语句？

方法1：用eval包裹动态导入语句 #

Webpack不会解析eval内部的代码，这样浏览器就能执行原生的动态导入逻辑，避免Webpack将外部URL当作模块去解析。修改类库代码如下：

// library.js
export async function getExternalModule(expression) {
  // 使用eval让Webpack跳过解析该导入语句
  const { stuff } = await eval(`import('http://someserver/' + expression)`);
  return stuff;
}

注意：如果expression来自用户输入，必须做严格的合法性校验，避免XSS等安全风险。

方法2：改用fetch+原生import加载模块 #

绕开Webpack的模块解析逻辑，直接通过fetch获取远程代码，再用data URI形式的import加载：

// library.js
export async function getExternalModule(expression) {
  const url = 'http://someserver/' + expression;
  const response = await fetch(response);
  
  if (!response.ok) {
    throw new Error(`Failed to load module: ${response.statusText}`);
  }
  
  const moduleCode = await response.text();
  // 用data URI方式加载代码，触发浏览器原生import
  const module = await import(`data:text/javascript,${encodeURIComponent(moduleCode)}`);
  return module.stuff;
}

这个方法完全脱离Webpack的模块系统，复用浏览器原生能力，兼容性更好，也更可控。

方法3：修改类库的构建配置（若类库用Webpack打包） #

如果你的类库是用Webpack构建的，可以在类库的Webpack配置中添加规则，让Webpack保留该动态导入的原生语法：

// library的webpack.config.js
module.exports = {
  module: {
    parser: {
      javascript: {
        // 不对动态导入做解析，保留原生语法
        dynamicImport: false
      }
    }
  }
};

如果只需要忽略特定URL，还可以编写自定义Webpack插件，在模块解析阶段跳过该URL的处理。

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