Webpack打包时require依赖包的语法差异问题咨询

这种情况是正常现象，本质是Webpack与Node原生模块解析逻辑的差异，并非你的配置错误，原因和解决方案如下：

核心原因 #

多数npm包会同时提供两种模块版本：

• CommonJS版本：对应package.json的main字段，模块导出遵循Node原生规则（比如module.exports = Service或module.exports = { API }）

• ES模块版本：对应package.json的module字段，使用ES模块语法导出（比如export default Service或export const API = ...）

• Node原生require会优先加载main字段指向的CommonJS模块，所以你的原始引入写法可以正常运行

• Webpack默认会优先加载module字段指向的ES模块（为了更好地支持tree shaking等优化），这时候ES模块的导出规则和CommonJS不同，就需要调整引入方式：

  • 对于ES模块的命名导出（export const API = ...），需要用解构const { API } = require("api")
  • 对于ES模块的默认导出（export default Service），需要用.default获取const Service = require("service").default

解决方案 #

你有两种选择：

1. 适配Webpack的引入方式：继续使用修改后的解构/.default写法，享受ES模块带来的打包优化
2. 让Webpack对齐Node的行为：修改webpack配置，让它优先加载CommonJS版本，这样原始引入写法可以直接复用：

   const path = require("path");
   
   module.exports = {
     entry: "./libs.js",
     output: {
       path: path.resolve(__dirname, "out"),
       filename: "bundle.js",
       library: "bundle",
       libraryTarget: "var",
     },
     resolve: {
       mainFields: ['main', 'module'] // 优先加载main字段的CommonJS模块
     }
   };
   

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