vue.js - 如何在 Webpack 中启用源 map ？

Question

我想在我的 webpack.config.js 中启用源映射。我正在添加一些开源代码，他们的 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: {
    ...
  }
};