Точки останова в файлах в хроме не попадают при использовании webpack sourcemaps

У меня есть точка останова в исходном файле .js(загружаемом через исходные карты), который, когда я указываю на встроенные инструменты chrome dev на вкладке источника, не попадает. Иногда я могу заставить их ударить, если я нажму кнопку формата {}, но его промах и промах.

Любые идеи?

  "devDependencies": {
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.1.20",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-stage-1": "^6.3.13",
    "css-loader": "^0.23.1",
    "material-ui": "^0.14.0",
    "style-loader": "^0.13.0",
    "stylus-loader": "^1.5.1",
    "tape": "^4.2.2",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.12.1"
  },
  "dependencies": {
    "babel-polyfill": "^6.1.19",
    "moment": "^2.11.2",
    "normalize.css": "^3.0.3"
  }

webapck:

module.exports = {
  entry: [
    'babel-polyfill',
    './app/app.js'
  ],
  output: {
    publicPath: '/',
    filename: 'dist/main.js'
  },
  debug: true,
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'app'),
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }

    ]
  },
  resolve: {
    extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"]
  }
};

Ответы

Ответ 1

Таким образом, это кажется проблемой с веб-пакетом и хром в прошлом, который был поднят.

Временное решение заключалось в том, чтобы установить для параметра devtool значение source-map или inline-source-map, но обратите внимание: это приведет к увеличению времени компиляции.

Как и в случае с Webpack 3, проблема улучшилась, но проблема заключается в взаимодействии между Chrome и Webpack с их изменяющимися базами кода.

С Webpack 3 У меня был успех со следующей конфигурацией:

devtool: 'cheap-module-source-map'

Ответ 2

Комментарий devtool

//devtool: 'source-map',

Добавить в плагины

new webpack.SourceMapDevToolPlugin({
        filename: '[file].map',
        include: ['app.js'],
        exclude: ['vendor.js'],
        columns: false
    })