Single File Bundle With Nestjs + Typescript + Webpack + Node_modules

How? How I can bundle NestJS project including node_module for offline application? webpack.config.js const path = require('path'); module.exports = { entry: path.join(__dirname

Solution 1:

I got it to work with the following webpack.config.js:

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

constWebPackIgnorePlugin =
{
  checkResource: function(resource)
  {
    const lazyImports =
    [
        '@nestjs/microservices',
        '@nestjs/microservices/microservices-module',
        'cache-manager',
        'class-transformer',
        'class-validator',
        'fastify-static',
    ];
  
    if (!lazyImports.includes(resource))
      returnfalse;

    try
    {
      require.resolve(resource);
    }
    catch (err)
    {
      returntrue;
    }
  
    returnfalse;
  }
};

module.exports =
{
  mode: 'production',
  target: 'node',
  entry:
  {
    server: './src/main.ts',
  },
  devtool: 'source-map',
  module:
  {
    rules:
    [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve:
  {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  node: {
    __dirname: false,
  },
  plugins:
  [
    newCleanWebpackPlugin(),
    new webpack.IgnorePlugin(WebPackIgnorePlugin),
  ],
  optimization:
  {
    minimize: false
  },
  performance:
  {
    maxEntrypointSize: 1000000000,
    maxAssetSize: 1000000000
  },
  output:
  {
    filename: '[name].js',
    path: path.resolve(__dirname, 'prod'),
  },
};

The part you need to pay attention to here is the IgnorePlugin. Nest uses lazy loading for some modules, and webpack can't tell which ones. The checkResource() makes the necessary checks for those modules that eould otherwise generate errors when trying to bundle your code.

You also need to put the target: node option in your config so that webpack knows some modules like fs and net are supported natively in Node (which is not the case when the target is a browser).

Solution 2:

@SergeySovgut: I am not sure if you have managed to add the custom configuration using webpack, yet. But here is one that I use currently in my prj

const nodeExternals = require('webpack-node-externals');
var terserPlugin = require('terser-webpack-plugin');
var uglifyJsPlugin = require('uglifyjs-webpack-plugin');
var dotEnvPlugin = require('dotenv-webpack');

module.exports = function(options) {
    return {
        ...options,
        entry: [ './src/main.ts'],
        watch: false,
        resolve: {
            extensions: ['.ts', '.js', '.jade']
        },
        externals: [
            nodeExternals(),
        ],
        module: {
            rules: [
                ...options.module.rules,
                {
                    test: /\.handlebars$/,
                    loader: 'handlebars-loader',
                    options: {
                        knownHelpersOnly: false,
                        inlineRequires: /\/assets\/(:?images|audio|video)\//ig,
                        partialDirs: [path.join(__dirname, './src/views/email/partials')],
                    },
                }
            ]
        },
        plugins: [
            ...options.plugins,
            new webpack.HotModuleReplacementPlugin(),
            new webpack.WatchIgnorePlugin([/\.js$/, /\.d\.ts$/]),
            newdotEnvPlugin({
                path: './config/development/.env',
                safe: true,
                systemvars: true,
                silent: true,
                defaults: false
            }), new webpack.DefinePlugin({
                'process.env.NODE_ENV': 'dev',
                'process.env.DEBUG': 'debug'
            }),new webpack.WatchIgnorePlugin([/\.js$/, /\.d\.ts$/]),
        ],
    };
};

In short, nest comes packed with webpack. Some of the rules have been preset, so for example, ts-loader has been autoconfigured to transpile your .ts to .js files. So all we need to do is extend the options already provided by nestjs and then write our custom configuration on top of it.

I believe most of the configurations are straightforward and could be easily obtained via the webpack docs

To run the file, configure a script like this -> `"build:webpack:dev": "rimraf dist && nest build --watch --webpack webpack.dev.config.js"

Then run npm run build:webpack:dev

More details here from official docs

Hope it helps