Webpack dev server: выдает пути сопоставления, локальные для удаленных.Загрузка выходных / пакетных файлов в IDE / Chrome - PullRequest
0 голосов
/ 23 сентября 2019

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

Проблема с текущей конфигурацией заключается в том, что кажется, что она выводит файл вывода / пакета в IDE, вместо того, чтобы сохранятьфайлы исходного кода.

Я сопоставляю «удаленные» URL-адреса с тем, что вижу в Chrome, в разделе source> webpack>.

mappings

Результат (см. Верхнюю левую панель):

output variables

И перед этим файл комплекта является первой остановкой в ​​отладчике, прежде чем я нажимаюрезюме (открывается в редакторе самостоятельно):

bundle file

На стороне браузера Chrome приостанавливает выполнение скрипта, но также переходит на вкладку источниковв трудно читаемый файл, вероятно, что-то, скомпилированное веб-пакетом.

Вот мой конфиг веб-пакета.Кто-нибудь видит, какие настройки у меня неправильно настроены?Это проект React.js (пользовательская конфигурация веб-пакета, приложение create-реагировать не используется)

const webpack = require("webpack");
const dotenvWebpack = require("dotenv-webpack");
const path = require("path");

module.exports = {
  entry : {
    adminArea :
      ['./adminSettingsArea/src/index.jsx']
  },
  output : {
    filename : 'shared/[name].bundle.js',
    path : path.resolve(__dirname, ''),
    publicPath : "/",
  },
  devtool: 'source-map',
  devServer : {
    contentBase : './adminSettingsArea/src',
    hot : true,
    historyApiFallback : true
  },
  plugins : [
    new webpack.HotModuleReplacementPlugin(),
    new dotenvWebpack()
  ],
  module : {
    rules : [
      {
        test : /\.(js|jsx)$/,
        exclude : [/node_modules/, /vendor/],
        use : {
          loader : "babel-loader",
          options : {
            presets : [
              '@babel/preset-env',
              "@babel/preset-react"
            ]
          },
        }
      }, {
        test : /\.css$/i,
        use : ['style-loader', 'css-loader'],
      }
    ],
  },
};
...