Estoy aprendiendo webpack, y utilicé este ejemplo oficial (sé que lodash es un módulo umd, así que uso lodash-es aquí), y generará una gran cantidad de código y dos archivos.

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

pero generará un archivo que solo tiene una línea cuando lo cambio un poco.

 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}());

mi pregunta es por qué son tan diferentes y cómo lograr el resultado del segundo código, cuando uso lodash. Creo que debería generar algún código que solo tenga la función unirse a algo.

tal vez mis conceptos básicos de js son delgados, si tiene algunos libros, artículos que pueden ayudarme a obtener la respuesta, eso también es excelente.

aquí está el paquete web.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', }, }, };