Después de que Webpack compila los archivos de mi aplicación web en un bundle.js , necesito mapas de origen para depurar cuando veo mi aplicación en el navegador. El problema es que parece que no puedo generar esos mapas de origen.

El comando que uso para iniciar es

npx webpack serve --config ./webpack.config.js --mode development

La aplicación funciona bien después, excepto que no puedo depurar errores en el archivo script.js cuando visualizo la aplicación en Chrome o Firefox. En cambio, la consola del navegador solo muestra un error en script.js:formatted , que es un archivo de una línea con todo mi código:

 module.exports = " [here is all my code]"

Tengo el siguiente archivo webpack.config.js . Tenga en cuenta que incluyo la línea devtool: "inline-source-map" (también probé devtool: "source-map" )`.

 //This is my webpack.config.js file var glob = require("glob"); module.exports = { devtool: "inline-source-map", entry: { app: ['./js/script.js', './style/style.scss', ...glob.sync('./assets/*.png')], }, mode: "development", output: { filename: './bundle.js', path: __dirname, sourceMapFilename: "script.js.map" }, devServer: { static: './dist', hot: true, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "script-loader" } }, { test: /\.s[ac]ss$/i, use: [ "style-loader", "css-loader", "sass-loader", ], }, { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource', }, ] }, };