Отладка JavaScript-части гибрида React+Webpack+Django в VS Code

У меня гибридное приложение Django + React: фронтенд React собран с помощью Webpack, добавлен в статические файлы и включен в страницу шаблона Django (это основано на этом учебнике Modern Javascript for Django Developers).

Есть ли способ легко отлаживать React/JavaScript часть приложения в VS Code?

Этот вопрос кажется близким, но точки останова остаются несвязанными для меня, несмотря на включение строки из его ответа.

Моя точка входа для React находится в ./assets/app.js, а пакетный файл - в ./static/js/js-bundle.js. Django обслуживает веб-сайт на localhost:8000.

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: './assets/app.js',  // path to our input file
  output: {
    filename: 'js/js-bundle.js',  // output bundle file name
    path: path.resolve(__dirname, 'static'),  // path to our Django static directory
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      filename: path.resolve(__dirname, 'templates', 'app.html'),
      template: path.resolve(__dirname, 'templates', 'app-template.html'),
    }),
    new MiniCssExtractPlugin({
      filename: "./css/[name].css", // change this RELATIVE to your output.path!
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: { presets: ["@babel/preset-env", "@babel/preset-react"] }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader']
      },
    ]
  }
};

package.json

[...]
"scripts": {
  "dev": "webpack --mode development --watch",
  "dev-no-watch": "webpack --mode development"
},
[...]

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}/assets",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
              "webpack:///./assets/*.js": "${workspaceRoot}/assets/*.js",
              "webpack:///./assets/*.tsx": "${workspaceRoot}/assets/*.tsx",
              "webpack:///./assets/*.ts": "${workspaceRoot}/assets/*.ts",
              "webpack:///./node_modules/*": "${workspaceRoot}/node_modules/*"
            }
          }
    ]
}

Вернуться на верх