Webpack 4下ES6类库跨域动态导入远程模块问题咨询

嘿，这个问题我之前做跨域类库开发时也碰到过，Webpack 4的动态导入默认确实只支持同域场景，不过有几个实用的方案能搞定，给你详细说说：

• 配置Webpack的output.publicPath指向远程域名
  Webpack的动态导入是根据publicPath来生成模块请求地址的，直接把它设置为b.com的模块部署路径，打包后所有动态导入的请求就会自动指向b.com。

  在你的webpack.config.js里修改output配置：

  module.exports = {
    // ...其他配置
    output: {
      filename: '[name].js',
      // 替换成b.com上你的模块实际部署路径
      publicPath: 'https://b.com/your-library-modules/'
    }
  };
  

  如果需要区分开发和生产环境的publicPath，可以用环境变量动态切换：

  const isProduction = process.env.NODE_ENV === 'production';
  
  module.exports = {
    output: {
      publicPath: isProduction ? 'https://b.com/your-library-modules/' : '/'
    }
  };
  

• 使用/* webpackIgnore: true */跳过Webpack解析，直接加载远程URL
  如果你的远程模块是独立打包好的（比如UMD格式），可以让Webpack不要解析这个动态导入的路径，直接发起跨域请求加载。

  写法如下：

  // 添加webpackIgnore注释，告诉Webpack不要处理这个模块路径
  import(/* webpackIgnore: true */ 'https://b.com/path/to/target-module.js')
    .then(module => {
      // 注意：如果远程模块是全局导出的，需要从window对象获取
      const targetModule = module.default || window.TargetModule;
      // 这里处理模块逻辑
      targetModule.doSomething();
    })
    .catch(error => {
      // 处理模块加载失败的情况，比如网络错误、跨域被拦截
      console.error('Failed to load remote module:', error);
    });
  

• 必须配置远程服务器（b.com）的CORS响应头
  不管用上面哪种方法，浏览器的跨域安全策略都会拦截跨域请求，所以一定要在b.com的服务器上配置CORS响应头，允许a.com的域名访问资源。

  在b.com的服务器配置中添加以下响应头：

  Access-Control-Allow-Origin: https://a.com
  

  如果是开发环境需要临时允许所有域名（生产环境不推荐），可以设置：

  Access-Control-Allow-Origin: *
  

额外注意事项 #

• 如果远程模块是Webpack打包的chunk，要确保chunk的文件名和你配置的publicPath完全匹配，否则会加载失败；
• 生产环境尽量避免使用*作为CORS允许的Origin，严格指定a.com，提升安全性；
• 如果遇到混合内容错误（比如a.com是HTTPS，b.com是HTTP），需要把b.com也升级为HTTPS，浏览器会阻止不安全的跨域请求。

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