Me acabo de enfrentar a una situación impredecible durante el uso de la configuración personalizada del paquete web. Intentaré explicar el problema.

Esta es mi aplicación simple (archivo index.js):

 console.log('!!this', this);

Esta es la configuración de mi paquete web (archivo webpack.config.js):

 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: './src/index.js', plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', }), ], output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, resolve: { extensions: ['.js', '.jsx', '.json'], }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, { test: /\.scss$/, use: [ 'style-loader', 'css-loader', { loader: 'sass-loader', options: { additionalData: `@import './src/constants/global';`, }, }, ], }, { test: /\.(png|svg|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { name: 'img/[name].[ext]' }, }, 'image-webpack-loader', ], }, ], }, };

Este es mi script npm para iniciar la aplicación (archivo package.json):

 "scripts": { "dev": "webpack serve --config webpack.config.js", },

Como resultado, veo la siguiente imagen: todo el código se ejecuta dos veces (index.js, VM787 index.js). Además de eso, si uso la devolución de llamada de obtención de datos en mi aplicación con esta configuración, veré dos solicitudes iguales en la pestaña Red.

¿Quién sabe cuál es la razón de eso y cómo resolverlo?

¡Gracias!