typescript - Webpack kildekart gjenkjennes ikke av Visual Studio 2017

Jeg bruker Visual Studio 2017 for mitt Typescript-prosjekt. Jeg prøvde å bruke Webpack for å lage en bundle for kildefilene. Kildekartet som Webpack produserer inneholder kildefil-URLene i dette formatet: "webpack:///./Main/SomeFile.ts". Dette gjør at Chrome Dev Tools viser webpack som et eget domene i fanen "Sources". Og når jeg utvider det, kan jeg se kilde-ts-filene og sette breakpoints med suksess. Men problemet er at jeg ikke kan debugge ved bruk av VS 2017 siden breakpoints jeg setter i IDE-en ikke fungerer.

Som en midlertidig løsning erstattet jeg manuelt alle disse "webpack:///."-delene i kildekartfilen med "../" som nå peker til de riktige stiene til kildefilene relativt til bundle-filen. Og nå plukker VS opp breakpointene, og jeg kan feilsøke inne i VS.

Mine spørsmål er:

  1. Hva er betydningen av "webpack:///" og hvorfor blir det produsert i stedet for relative stier?
  2. Hvorfor plukker ikke VS 2017 opp disse og fungerer direkte ut-av-boksen? Og hva er den riktige løsningen i motsetning til løsningen jeg prøvde ovenfor?
  3. Hvis det ikke finnes noen annen løsning enn omgåelsen jeg nevnte, hvordan kan jeg integrere den i webpack-behandlingsprosessen slik at jeg ikke må gjøre det manuelt hver gang?

Her er mine konfigurasjoner:

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    devtool: "source-map",
    entry: {
        app: './Components/MainComponent/MainComponent.ts'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    },
    module: {
        rules: [
            { test: /.css$/, use: 'css-loader' },
            { test: /.ts$/, use: 'ts-loader' },
            //{ test: /.ts$/, use: 'awesome-typescript-loader' },
            //{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    resolve: {
        extensions: ['.ts', '.js', '.json']
    }
}

tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": false,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "./dist/",
    "allowJs": true,
    "module": "amd",
    "alwaysStrict": true
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": true
}

Svar #1

Legg dette til i din webpack.config.js, inne i module.exports:

devtool: false,
plugins: [
    new webpack.SourceMapDevToolPlugin({
        filename: "[file].map",
        fallbackModuleFilenameTemplate: '[absolute-resource-path]',
        moduleFilenameTemplate: '[absolute-resource-path]'
    })
]

Dette vil få breakpoints til å fungere i Visual Studio 2017.

Relaterte artikler