Отмените отладку в браузере при использовании bundle.js

Инструменты: инструменты разработчика Chrome, ReactJs и Webpack

Возможно, это было, когда я переключился на связывание с webpack, но изначально, когда я начал свой проект, мне удалось связать мои js с файлом bundle.js, но у меня все еще есть доступ к файлам в средстве отладки браузера. Теперь все, что я вижу в браузере в моей папке js, это bundle.js

С помощью webpack, как я могу вернуться к возможности видеть все мои файлы Javascript в отладчике браузера, чтобы я мог делать такие вещи, как точки останова вставки?

Ответы

Ответ 1

После долгого бессмысленного использования кучи операторов печати я, наконец, вернулся и понял, как это сделать.

Вот как вы получаете возможность использовать точки останова после того, как вы соберете:

Перейдите в файл webpack.config.js и установите devtools с "true" на "source-map" или один из других параметров, которые @MichelleTilley объяснил в своем ответе.

webpack.config.js(вот пример)

module.exports = {
  entry: "./js/app.js",
  output: {
    filename: "js/bundle.js"
  },
  debug: true,
  devtool: "#eval-source-map",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel'
      }
    ]
  }
};

Также, как объяснил @MichelleTilley в своем ответе, вам может потребоваться включить опции devtools в Chrome.

После этого при отладке вам придется искать новую папку с именем ".". это очень сложно заметить!

Благодаря ответу Stackoverflow ниже с опубликованными изображениями я наконец нашел, где находится эта папка.

Настройте веб-пакет, чтобы разрешить отладку браузера

Ответ 2

Вы можете использовать параметр devtool, чтобы webpack генерировал исходные карты, которые (при включении в настройках Chrome devtools) позволит Chrome перевести код в bundle.js (который может даже быть уменьшен) в исходный код.

Для разработки я установил эту опцию в eval-source-map или cheap-eval-source-map, и для производства я либо оставил это, либо создал отдельные файлы исходных карт с помощью source-map.

Ответ 3

Его обновление теперь нужно просто включить mode: "development" в верхней части module.exports и установить отладчик в любом месте вашего файла .js, который будет работать, и открыть chrome devtools
webpack.config.js:

const path = require('path')
module.exports = {
    mode: 'development',
entry: path.join(__dirname,'src/js','index.js'),
  output: {
    path: path.join(__dirname, 'dist'),
      filename: 'build.js'
   },
  module: {}
}

проверять