why webpack output is always main.js?

Question

I have project with this structure:

my-app/
├─ node_modules/
├─ dist/   
├─ src/
│  ├─ index.css
│  ├─ index.js
│  ├─ index.html
├─ package.json
├─ webpack.config.js

My webpack.js is:

const { Module } = require("webpack");
Module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist',
    }
}

When I run the command npx webpack or npm run build, the output file is always saved as dist/main.js instead of dist/bundle.js

Any ideas of what I'am doing wrong?

There is a same question like your. https://stackoverflow.com/questions/66539943/webpack-output-filename-config-not-working , try to restart your IDE, resave your webpack.config.js — Xth, Jun 28 '21 at 01:45
I don't think there is a named export `Module` exported in webpack. it's suppose to be `module.exports`. — Ravikumar, Jun 28 '21 at 01:48

score 1 · Answer 1 · answered Apr 18 '23 at 04:35

The docs (for webpack 5) give several options for setting the entry property. You are using the "Single Entry" way. Here is what the docs say about it:

Single Entry (Shorthand) Syntax
module.exports = {```
    entry: './path/to/my/entry/file.js',```
};
[this] single entry syntax for the entry property is a shorthand for:
module.exports = {
    entry: {
        main: './path/to/my/entry/file.js',
    },
};

So just to reiterate, by doing

entry: './src/index.js',

in your config file, you are unknowingly using shorthand and setting the name of the bundled file to main.js.

If you look at the doc page linked above, you'll see that there could be several ways to fix this, but one way would be to replace your current entry property with:

entry: {
     'bundle': './src/index.js'
},

why webpack output is always main.js?

1 Answers1