Option to get a single line main.js output with only references (webpack)?

Question

I'm new to webpack and I have been put on a project where someone was already coding something before me. I have all the source code and I have also a webpack.config.js file.

I want to rebuild the output main.js from those files but I think I might be missing some steps to get there. I use the loader babel by the way and the react library.

When I run npx webpack in the folder where the .config.js file is I have something with this structure:

/*! For license information please see main.js.LICENSE.txt */
(() => {
    var e = {
            418: e => {
                "use strict";
                var t = Object.getOwnPropertySymbols,
                    n = Object.prototype.hasOwnProperty,
                    r = Object.prototype.propertyIsEnumerable;

                function o(e) {...

I want to get something that looks like this (I modified it so it is more readable but normally everything is on one line):

() => {
    var __webpack_modules__ = {
            "./src/components/app.js": (__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
                "use strict";
                eval('__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)

If anyone has an idea feel free to tell me, I just started using webpack two weeks ago and I might have misunderstood something.

My Webpack.config.js file

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./static/frontend"),
    filename: "[name].js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
  },
  plugins: [
    new webpack.DefinePlugin({
      "process.env": {
        // This has effect on the react lib size
        NODE_ENV: JSON.stringify("production"),
      },
    }),
    new HtmlWebpackPlugin({
      favicon: "./src/small-logo-orange.svg"
    }),
  ],
};

Answer 1

Ok after some research I found out what was my problem.

The previous guy gave me a webpack.config.js file with no option for the mode field in :

module.exports = {
};

To get the same thing as him I need to have the mode set to 'development'

module.exports = {
  mode: 'development', ...
};

See https://webpack.js.org/configuration/mode

Hope this will help someone one day.