Webpack configuration for node

Question

I'm trying to configure Webpack for an existing project, a node app. I'm facing multiple issues, and I can't get to solve any of them, nor do I know where to start in the first place.

Context

Here is the folder structure of the project :

+---app 
+---bin
+---public
|   +---images
|   +---javascripts
|   +---stylesheets
+---resources
+---routes
+---test
+---utils
+---views
+---webpack.config.js
+---tsconfig.json
+---tsconfig.app.json
+---tsconfig.bin.json
+---tsconfig.public.json
+---tsconfig.routes.json
+---tsconfig.utils.json
+---jest.config.js
+---package.json
\---app.ts

The entry file is /bin/www.ts. It accesses an express API where there are routes for the backend (app folder) and routes to serve the frontend, HTML templates located in the views folder, and JS and TS files located in the public folder. The TS config files are divided as the target is sometimes ES5, sometimes ES6. Below is the webpack config file.

const path = require("path");
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin')
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")


module.exports = {
    entry: {
        main: path.resolve(__dirname, "bin/www.ts"),
    },
    output: {
        filename: "projectname.bundle.js",
        path: path.resolve(__dirname, "dist"),
    },
    // target: 'node',
    module: {
        rules: [
            {
                test: /\.ts$/,
                exclude: /node_modules/,
                use: "ts-loader",
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ],
    },
    devServer: {
        static: "./dist",
        port: 8080,
        hot: true
    },
    resolve: {
        extensions: [".ts", ".js"],
        fallback: {
            "querystring": require.resolve("querystring-es3"),
            "timers": require.resolve("timers-browserify"),
            "https": require.resolve("https-browserify"),
            "path": require.resolve("path-browserify"),
            "http": require.resolve("stream-http"),
            "stream": require.resolve("stream-browserify"),
            "crypto": require.resolve("crypto-browserify"),
            "zlib": require.resolve("browserify-zlib"),
            "os": require.resolve("os-browserify/browser")
            // "fs": false,
            // "tls": false,
            //     "stream": false,
            //     "crypto": false,
            //     "async_hooks": false,
        }
        // modules: ["node_modules"]
    },
    mode: "development",
    plugins: [new MiniHtmlWebpackPlugin({ context: { title: "Project name" } })],
};

Problems

When i try to run webpack, this type of error appears :

ERROR in ./node_modules/multer/storage/disk.js 2:9-22
Module not found: Error: Can't resolve 'os' in 'C:\Users\**\**\**\node_modules\multer\storage'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

and there is 99 of them. I guess that's because the express app uses node modules, so i tried to set the target to node, but then this type of warning appears:

WARNING in ./node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression

or

WARNING in ./node_modules/mongodb/lib/encrypter.js 9:28-64
Module not found: Error: Can't resolve 'mongodb-client-encryption'

I think that's maybe because I have to separate configurations but i'm not sure. I tried everything from StackOverflow including this one and this one but nothing worked.

I'm not at all an expert in this type of config, I tried to learn webpack but setting it up for an existing project, and moreover such a complicated one is far more difficult than I can handle, can someone help me with that?

Answer 1

Brother i can feel your pain. here is my suggestion: simplify your webpack config file to atleast run it. Remove everything (for now) in webpack config file except mode,entry,output,target,externals... Plus! install webpack-node-externals package and use it in the config file like in this link