title: Source Maps not generated when using Webpack with "webpack serve"
body: <p>After Webpack compiles the files of my web application into a <code>bundle.js</code>, I need source maps to debug when viewing my application in the browser. The problem is that I cannot seem to generate those Source Maps.</p>
  <p>The command I use to launch is</p>
  <p><code>npx webpack serve --config ./webpack.config.js  --mode development</code></p>
  <p>The application works fine afterwards except that I cannot debug errors in <code>script.js</code> file when viewing the application in Chrome or Firefox. Instead, the browser console just shows an error in <code>script.js:formatted</code>, which is a one-line file with all my code:</p>
  <pre><code>module.exports = &quot; [here is all my code]&quot;
  </code></pre>
  <p>I have the following <code>webpack.config.js</code> file. Note that I include the line <code>devtool: &quot;inline-source-map&quot;</code> (I have also tried <code>devtool: &quot;source-map&quot;</code>)`.</p>
  <pre><code>//This is my webpack.config.js file
  var glob = require(&quot;glob&quot;);
  
  module.exports = {
    devtool: &quot;inline-source-map&quot;,
    entry: {
      app: ['./js/script.js', './style/style.scss', ...glob.sync('./assets/*.png')],
    },
    mode: &quot;development&quot;,
    output: {
      filename: './bundle.js',
      path: __dirname,
      sourceMapFilename: &quot;script.js.map&quot;
    },
    devServer: {
      static: './dist',
      hot: true,
    },
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: &quot;script-loader&quot;
          }
        },
        {
          test: /\.s[ac]ss$/i,
          use: [
            &quot;style-loader&quot;,
            &quot;css-loader&quot;,
            &quot;sass-loader&quot;,
          ],
        },
        {
          test: /\.(png|svg|jpg|jpeg|gif)$/i,
          type: 'asset/resource',
        },
      ]
    },
  };
  </code></pre>