您如何在WebPack中启用源地图

Question

我想在我的webpack.config.js中启用源地图。我正在添加一些OpenSOURCE，他们的webpack.config.js看起来很奇怪。

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`);
};

如果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);

我不知道应该添加源地图添加到webpack.config.js还是只是开发版本，我不知道如何添加它，因为这些配置文件对我来说很奇怪。

Answer 1

行..." devtool"：" source-map"是正确的，但似乎处于错误的深度。

应该是：

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