0

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?

Ismaili Mohamedi
  • 906
  • 7
  • 15
Hugo
  • 33
  • 6
  • "I'm trying to configure webpack for an existing project, a node app" — Why? The primary benefit of webpack is that it can convert CommonJS modules and JSX into something web browsers can use. Node.js has native support for CommonJS modules and isn't rendering a DOM so code using JSX is pointless there. – Quentin Aug 22 '23 at 08:20
  • There are multiple other benefits to using a tool like webpack, be it code splitting, faster build times than tsc, or useful features like HMR or devServer. The main reason is that the project needs to be compiled faster, particularly in development – Hugo Aug 22 '23 at 08:44
  • To develop, this is a nodeJS app, but as i was saying in my first message, there is a part that's shipped to the browser. The public folder contains every page of the website, but this is a node JS app because it renders webpages on certain routes – Hugo Aug 22 '23 at 09:48

0 Answers0