我试图配置JavaScript调试器,因为webtorm网站告诉我: https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

但是,它工作了2分钟,现在不工作了,我不知道为什么。。

编辑1(基于@lena comment)

源代码位于 https://github.com/Emixam23/ChatApp

在这里你可以找到我的配置。对于WebStorm我只是按照网站上说的做了

webpack.config.js网站

let path = require("path");
let webpack = require('webpack');

let isProduction =
    process.argv.indexOf('-p') >= 0 || process.env.NODE_ENV === 'production';

// plugins
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let WebpackCleanupPlugin = require('webpack-cleanup-plugin');

// variables
let sourcePath = path.join(__dirname, './src');
let outPath = path.join(__dirname, './build');

module.exports = {
    context: sourcePath,
    entry: {
        app: './main.tsx'
    },
    output: {
        path: outPath
    },
    target: 'web',
    resolve: {
        extensions: ['.js', '.ts', '.tsx'],
        // Fix webpack's default behavior to not load packages with jsnext:main module
        // (jsnext:main directs not usually distributable es6 format, but es6 sources)
        mainFields: ['module', 'browser', 'main'],
        alias: {
            app: path.resolve(__dirname, 'src/app/')
        }
    },
    // Set debugging source maps to be "inline" for
    // simplicity and ease of use
    devtool: "inline-source-map",

    // Supported file loaders
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            // css
            {
                test: /\.css$/,
                use: [
                    isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
                    {
                        loader: 'css-loader',
                        query: {
                            modules: true,
                            sourceMap: !isProduction,
                            importLoaders: 1,
                            localIdentName: isProduction
                                ? '[hash:base64:5]'
                                : '[local]__[hash:base64:5]'
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                require('postcss-import')({ addDependencyTo: webpack }),
                                require('postcss-url')(),
                                require('postcss-preset-env')({
                                    /* use stage 2 features (defaults) */
                                    stage: 2
                                }),
                                require('postcss-reporter')(),
                                require('postcss-browser-reporter')({
                                    disabled: isProduction
                                })
                            ]
                        }
                    }
                ]
            }
        ]
    },

    devServer: {
        historyApiFallback: true,
        host: '0.0.0.0'
    },

    plugins: [
        new webpack.EnvironmentPlugin({
            NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
            DEBUG: false
        }),
        new webpack.WatchIgnorePlugin([/css\.d\.ts$/]),
        new WebpackCleanupPlugin(),
        new MiniCssExtractPlugin({
            filename: isProduction ? '[contenthash].css' : '[hash].css',
            disable: !isProduction
        }),
        new HtmlWebpackPlugin({
            template: 'assets/index.html'
        })
    ]
};

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    // Set React as the JSX factory
    "jsx": "react",
    // Include typings from built-in lib declaration
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    // Use ESNEXT module system
    "module": "esnext",
    "moduleResolution": "node",
    //"noEmit": true,
    "noImplicitAny": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    // Include module source maps for debugging
    "sourceMap": true,
    "target": "es5",
    "baseUrl": "src",
    "paths": {
      "app/*": ["./app/*"]
    }
  },
  "include": [
    "src"
  ], 
  "exclude": ["dist", "build", "node_modules"]
}

包.json

{
  "name": "emixam23-chat",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@grpc/grpc-js": "^0.5.2",
    "@improbable-eng/grpc-web": "^0.11.0",
    "@types/react": "^16.9.2",
    "@types/react-bootstrap": "^0.32.19",
    "@types/react-router": "^5.0.3",
    "bootstrap": "^4.3.1",
    "google-protobuf": "^3.10.0-rc.1",
    "googleapis": "^43.0.0",
    "grpc": "^1.23.3",
    "grpc-web": "^1.0.6",
    "history": "^4.9.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "mobx": "^5.13.0",
    "mobx-react": "^6.1.3",
    "mobx-react-devtools": "^6.1.1",
    "mobx-react-router": "^4.0.7",
    "postcss-browser-reporter": "^0.6.0",
    "postcss-import": "^12.0.1",
    "postcss-preset-env": "^6.7.0",
    "postcss-reporter": "^6.0.1",
    "postcss-url": "^8.0.0",
    "react": "^16.9.0",
    "react-bootstrap": "^1.0.0-beta.12",
    "react-dom": "^16.9.0",
    "react-hot-loader": "^4.12.12",
    "react-router": "^5.0.1",
    "react-scripts": "^3.1.1",
    "style-loader": "^1.0.0",
    "ts-loader": "^6.0.4",
    "typescript": "^3.6.2",
    "typings-for-css-modules-loader": "^1.7.0",
    "webpack": "^4.39.3",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --hot --progress --colors --port 3000 --open",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build": "webpack",
    "watch": "webpack -w"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}