Webpack 5 multiple javascript files produces 0 bytes bundle in production mode

Question

I just need to minify and bundle all my js files into one file. So prepared a simple configuration as;

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

module.exports = {
    mode: 'production',
    resolve: {
        extensions: ['.js']
    },
    entry: [
        './src/main/resources/static/js/app/context.js',
        './src/main/resources/static/js/app/pagemanager.js'
    ],
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    }
};

but if I execute webpack --mode production it produces 0 bytes and bundle.js is empty

asset bundle.js 0 bytes [emitted] [minimized] (name: main)
./src/main/resources/static/js/app/context.js 9.74 KiB [built] [code generated]
./src/main/resources/static/js/app/pagemanager.js 27.9 KiB [built] [code generated]
webpack 5.20.2 compiled successfully in 299 ms

but with webpack --mode development it creates a file that contains js code.

What may be the reason leading to this? Thank you.

Answer 1

I think that if your file don't have any code to execute, such as

// just define a var
const foo = 1;
// or just a string 
"console.log('something');"

and the webpack mode is "production"(if you don't set it, the default value is this),the result will be empty, asset main.js 0 bytes. The solution is changing the code to this.

console.log('something');

Answer 2

Answering my question for those who is facing the same problem, There should be "export" syntax, that refers what you export from these js files to solve this problem.