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

user_4015268 0
Viewed 670

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.

webpack javascript
2 Answers

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');
user_191380900

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.

user_40152680
Related