I am learning webpack, and i used this official example(i know lodash is a umd module, so i use lodash-es here), and it will generate a lot of code, and two files.

import _ from "lodash-es";
function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["Hello", "webpack"],(" "));
  return element;
}
document.body.appendChild(component());

but it will gen one file which only has one line when i change it a little.

function component() {
  const element = document.createElement("div");
  element.innerHTML = ["Hello", "webpack"].join(" ");
  return element;
}
document.body.appendChild(component());

document.body.appendChild(function(){const e=document.createElement("div");return e.innerHTML=["Hello","webpack"].join(" "),e}());

my question is why they are so different and how to achieve the second code's result, when i using lodash. I think it should generate some code which only have the join something function.

maybe my js basics is thin, if you have some books, articles which can help me get the answer, that is also great.

here is the webpack.config.js

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "[name].bundle.js",
    chunkFilename: '[id].[hash].js',
    path: path.resolve(__dirname, "dist"),
    clean: true,
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};