webpack not generating source maps

Question

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
    },
    devtool: "source-map"
}

package.json

  "scripts": {
    "build": "webpack --progress --colors",
    "dev": "webpack-dev-server -d --watch --progress --colors"
  },

index.js

let h = "hello world"
console.log(h)

I run both npm build and npm run dev but neither seem to generate source maps. The way I'm checking if they show up is if I can see the original source in Chrome dev tools or Safari dev tools.

Thanks for any help!

Update 0

• Running npm run build ( npm build doesn't do anything) does indeed generate bundle.js.map and I can use the source maps successfully in Google Chrome (yay!)

• Running npm run dev seems to compile fine and serves my webpage successfully but the dist directory doesn't contain bundle.js or bundle.js.map - but when I go to localhost:8080 it still works (without the source maps).

Answer 1

Can you see the actual .map files in your dist folder? Try adding the SourceMapDevToolPlugin to your webpack.config.js file.

new webpack.SourceMapDevToolPlugin({
  filename: "[file].map"
}),

Then restart the build process and check in the dist folder for .map files.

Answer 2

I recently had this problem with webpack 3.6.0. No source map files were being generated even though I had devtool: 'source-map' in webpack.config.js.

In my case, the problem was that I was passing -d to webpack on the command line, which is a shortcut for all of this (notice the second option and its argument):

--debug --devtool cheap-module-eval-source-map --output-pathinfo

Instead of passing -d , I now pass --debug --output-pathinfo and source map files are generated as expected.

Answer 3

saw your question in the webpack chat. :)

change devtool to source-map and then you have source maps. In Chrome you can see the original source like this (debugging there works too)

Edit: Also in scripts in package.json you don't need to ref to the node_modules folder. just the command, npm will look automatic in the node_modules/.bin folder.

Answer 4

I could not generate source maps, because my output.filename did not end with '.js'.

so i need to use 'test' to set SourceMapDevToolPlugin

    new webpack.SourceMapDevToolPlugin({
      test: new RegExp('\.[js|css|mjs].*'),
    }),