如何用Webpack构建可被require的自包含库？解决导出失效问题

我之前也踩过这个坑！Webpack默认是为浏览器环境打包的，不会自动把你的ES6导出转换成Node.js能识别的CommonJS格式，这就导致打包后的代码被require时拿不到任何内容。结合你的场景，给你整理几个关键的解决步骤：

1. 修正Webpack核心配置 #

首先要把Webpack的配置调整为适配Node.js环境，重点设置target和output.libraryTarget，同时加上Babel转译处理ES6特性。这里给你一个适配Serverless的示例配置：

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // 必须设置target为node，告诉Webpack我们是给Node.js环境打包，别把Node核心模块（比如fs、http）打包进去
  target: 'node',
  mode: 'production', // 生产模式下会自动优化打包结果，也可以设为development调试用
  entry: './src/index.js', // 你的功能库入口文件路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    // 关键！设置libraryTarget为commonjs2，让Webpack把你的导出挂载到module.exports上
    // 这样require('./dist/index')就能直接拿到你导出的函数了
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              // 用@babel/preset-env把ES6+代码转译成目标Node.js版本支持的语法
              // 这里的node版本要和AWS Lambda使用的runtime一致，比如14.x
              ['@babel/preset-env', { targets: { node: '14' } }]
            ]
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin() // 每次打包前清空dist目录，避免旧文件干扰
  ],
  // 可选：如果你的代码依赖AWS SDK这类Lambda环境自带的库，可以设为externals，不用打包进去
  externals: {
    aws-sdk: 'aws-sdk'
  }
};

2. 确保入口文件的导出逻辑正确 #

你的功能库入口文件（比如src/index.js）要明确导出需要暴露的函数，两种写法都可以：

// 写法1：ES6命名导出
export const myServerlessHandler = async (event) => {
  // 你的业务逻辑
  return {
    statusCode: 200,
    body: JSON.stringify({ message: 'Success!' })
  };
};

// 写法2：直接用CommonJS导出（更直观）
// module.exports = { myServerlessHandler };

Webpack在libraryTarget: commonjs2配置下，会自动把ES6的export转换成module.exports，所以两种写法都能生效。

3. 验证打包结果 #

打包完成后，打开dist/index.js，末尾应该能看到类似这样的代码：

module.exports = __webpack_exports__;

这就说明你的导出已经被正确挂载到module.exports上了，其他脚本require时就能拿到对应的函数。

4. 配置Serverless指向正确的handler #

最后在serverless.yml里，要确保handler路径指向打包后的文件和导出的函数：

service: my-serverless-service

provider:
  name: aws
  runtime: nodejs14.x # 要和Babel配置的target版本一致

functions:
  myFunction:
    handler: dist/index.myServerlessHandler # 格式：[打包后的文件路径].[导出的函数名]
    events:
      - httpApi:
          path: /test
          method: get

常见排查点 #

• 别漏了target: 'node'：如果没设置，Webpack会打包浏览器环境的polyfill，不仅会导致体积变大，还可能在Node.js环境报错，同时影响导出逻辑。
• 确认libraryTarget是commonjs2：commonjs和commonjs2的区别在于，前者是给exports赋值，后者是直接赋值给module.exports，后者更适合单独导出函数的场景。
• 检查Babel转译是否生效：如果你的ES6特性（比如箭头函数、async/await）没被转译，旧Node.js版本运行时会报错，一定要确认@babel/preset-env的targets设置正确。

内容的提问来源于stack exchange，提问作者Tomáš Zato