如何使用webpack将多个Node.js文件打包为单个bundle及异常排查

问题原因与解决方法 #

1. 直接输出源码的核心诱因 #

你遇到的运行时输出完整源码的问题，90%以上的概率是执行方式缺少node运行时声明导致的：

• 如果你是直接执行./bundle.js启动文件，系统默认会将其识别为纯文本文件输出，不会调用Node.js执行
• 如果你执行node bundle.js还会输出源码，再排查打包配置问题

2. 配置修复方案 #

（1）支持直接执行（可选）

如果需要实现./bundle.js的直接执行效果，需要在打包后的文件头部添加shebang声明，修改webpack配置如下：

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')

'use strict';

module.exports = {
    externals: [nodeExternals()],
    entry: './lib/index.js',
    output: {
        iife: false,
        path: path.resolve(__dirname, 'lib'),
        filename: 'bundle.js',
        // webpack4 请添加下面这行，删除iife配置
        // libraryTarget: 'commonjs2'
    },
    target: 'node',
    plugins: [
      // 自动注入shebang头部
      new webpack.BannerPlugin({
        banner: '#!/usr/bin/env node',
        raw: true,
        entryOnly: true
      })
    ]
};

打包完成后再执行chmod +x ./lib/bundle.js给文件添加执行权限，即可直接运行。

（2）iife配置不生效的问题

• Webpack 4 不存在output.iife配置项，设置后不会生效，替换为output.libraryTarget: 'commonjs2'即可关闭IIFE打包
• Webpack 5 中target: 'node'默认就会关闭IIFE，你配置的iife: false属于冗余配置，只要版本正确不会生成IIFE打包产物

3. 入口文件逻辑检查 #

确认你的入口文件./lib/index.js中的业务逻辑是直接执行的，而不是仅导出函数没有调用，比如：

// 错误写法：仅导出未调用，打包后运行不会有任何输出
module.exports = () => {
  console.log('业务逻辑')
}

// 正确写法：主动调用逻辑
const run = () => {
  console.log('业务逻辑')
}
run()

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