TypeScript webpack build is not including node_modules

Question

Why is webpack not including the node_module libraries in the build when they are imported into the index file?

webpack is still a bit of a black art for me that I have not fully grasped, so below is an explanation of that I am trying to achieve.

I am building a test application to run as serverless code on an AWS Lambda Node server. The goal is to keep the deployment package a small as possible by having 1 or more chunks and no node_modules folder on the server.

I am writing in Typescript v3 and using webpack v4 to create a bundle for the server.

Here is my directory structure:

• dist/
• node_modules/
• src/index.ts
• package.json
• tsconfig.json
• tslint.json
• webpack.config.js

here is an excerpt from my package.json

  "dependencies": {
    "moment": "^2.22.2"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.15",
    "@types/node": "^10.12.2",
    "awesome-typescript-loader": "^5.2.1",
    "aws-lambda": "^0.1.2",
    "source-map-loader": "^0.2.4",
    "ts-node": "^7.0.1",
    "tslint": "^5.11.0",
    "tslint-loader": "^3.5.4",
    "typescript": "^3.1.6",
    "webpack": "^4.25.1",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2"
  }

my index.ts that I am trying to bundle:

import { Handler } from "aws-lambda";
import moment from "moment";

const handler: Handler = async ( event: any ) => {
    const stamp = moment().format( "x" );
    console.log( `process: ${ process.env.NAME } called at ${ stamp }` );
    console.log( event );
    return {
        body: "process completed",
        statusCode: 200
    };
};

export { handler };

my tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "allowJs": true,
        "pretty": false,
        "removeComments": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "types": [
            "node"
        ],
        "lib": [
            "es5",
            "es6",
            "dom"
        ]
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

finally here is my webpack.config.js:

const path = require( "path" );
const UglifyJSPlugin = require( "uglifyjs-webpack-plugin" );
const nodeExternals = require( "webpack-node-externals" );

const ROOT = path.resolve( __dirname, "src" );
const DESTINATION = path.resolve( __dirname, "dist" );

module.exports = {
    context: ROOT,
    mode: "production",
    entry: {
        index: "./index.ts"
    },
    target: "node",
    externals: [ nodeExternals() ],
    optimization: {
        minimizer: [
            new UglifyJSPlugin( {
                uglifyOptions: {
                    compress: true,
                    mangle: false,
                    toplevel: false,
                    keep_classnames: true,
                    keep_fnames: true
                }
            } )
        ],
        splitChunks: {
            cacheGroups: {
                node_vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "all",
                    priority: 1
                }
            }
        }
    },
    output: {
        filename: "[name].js",
        libraryTarget: "commonjs2",
        path: DESTINATION
    },
    resolve: {
        extensions: [ ".ts", ".js" ],
        modules: [ ROOT, "node_modules" ]
    },
    module: {
        rules: [
            {
                enforce: "pre",
                test: /\.js$/,
                use: "source-map-loader"
            },
            {
                enforce: "pre",
                test: /\.ts$/,
                exclude: /node_modules/,
                use: "tslint-loader"
            },
            {
                test: /\.ts$/,
                exclude: [ /node_modules/ ],
                use: "awesome-typescript-loader"
            }
        ]
    },
    devtool: "cheap-module-source-map",
    devServer: {}
};

When I run webpack I get the following console output:

Version: webpack 4.25.1
Time: 4856ms
Built at: 2018-11-08 15:41:09
   Asset      Size  Chunks             Chunk Names
index.js  3.83 KiB       0  [emitted]  index
Entrypoint index = index.js
[0] ./index.ts 3.11 KiB {0} [built]
[1] external "moment" 42 bytes {0} [built]

When I deploy this to AWS Lambda I and call the function I get the following error:

{
    "errorMessage": "Cannot find module 'moment'",
    "errorType": "Error",
    "stackTrace": [
    "Function.Module._load (module.js:474:25)",
    "Module.require (module.js:596:17)",
    "require (internal/module.js:11:18)",
    "Object.<anonymous> (/var/task/index.js:1:3963)",
    "__webpack_require__ (/var/task/index.js:1:323)",
    "Object.<anonymous> (/var/task/index.js:1:3595)",
    "__webpack_require__ (/var/task/index.js:1:323)",
    "module.exports.__awaiter.__awaiter.P (/var/task/index.js:1:1650)",
    "Object.<anonymous> (/var/task/index.js:1:1695)"
    ]
}

Answer 1

because of nodeExternals, that declares every single dependency as external (i.e: node_modules has to be present when executed).