How do you enable source maps in Webpack?

Question

I want to enable source maps in my webpack.config.js. I'm adding onto some opensource and their webpack.config.js looks weird.

webpack.config.js

// Entry point webpack config that delegates to different environments depending on the --env passed in.
module.exports = function(env) {
  process.env.NODE_ENV = env;
  return require(`./webpack.${env}.js`);
};

Here is what it returns if env = development

/**
 * Webpack configuration for development.
 *
 * Contains plugins and settings that make development a better experience.
 */

const webpack = require("webpack");
const merge = require("webpack-merge");
const fs = require("fs");
const { execSync } = require("child_process");
const path = require("path");
const argv = require("yargs").argv;

const commonConfig = require("./webpack.common.js");
const DashboardPlugin = require("webpack-dashboard/plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

if (!fs.existsSync(path.resolve(__dirname, "vendor", "vendor-manifest.json"))) {
  // This _should_ exist, since we run the command for you when you run `npm run dev`
  console.log(
    "Vendor files not found. Running 'npm run build:dev-dll' for you..."
  );
  execSync("npm run build:dev-dll");
  console.log("Done generating vendor files.");
}

const devConfig = {
  mode: "development",
  main: {
    devtool: "source-map",
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify("development")
      }),
      new webpack.DllReferencePlugin({
        context: ".",
        manifest: require("./vendor/vendor-manifest.json")
      }),
      new ForkTsCheckerWebpackPlugin({
        tslint: true,
        async: false,
        silent: true
      })
    ]
  }
};

// Only enable the dashboard plugin if --watch is specified
// The dashboard plugin annoyingly doesn't allow webpack to exit,
// so we only enable it with --watch, which doesn't exit anyways
if (argv.watch) {
  devConfig.main.plugins.push(new DashboardPlugin());
}

module.exports = merge.multiple(commonConfig, devConfig);

I don't know if source map should be added to webpack.config.js or maybe just the development version and I don't know how to add it cause these config files look odd to me.

Answer 1

The line... "devtool": "source-map" is correct, but it appears to be at the wrong depth.

Should be:

const devConfig = {
  mode: "development",
  devtool: "source-map",
  main: {
    ...
  }
};