Soy nuevo en webpack y me pusieron en un proyecto en el que alguien ya estaba codificando algo antes que yo. Tengo todo el código fuente y también tengo un archivo webpack.config.js.

Quiero reconstruir la salida main.js de esos archivos, pero creo que me faltan algunos pasos para llegar allí. Por cierto, uso el cargador de babel y la biblioteca de reacción.

Cuando ejecuto npx webpack en la carpeta donde está el archivo .config.js, tengo algo con esta estructura:

 /*! 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) {...

Quiero obtener algo parecido a esto (lo modifiqué para que sea más legible, pero normalmente todo está en una sola línea):

 () => { 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__)

Si alguien tiene una idea, no dude en decírmelo, acabo de empezar a usar webpack hace dos semanas y es posible que haya entendido mal algo.

Mi archivo Webpack.config.js

 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" }), ], };