webpackソースマップを使用しているときにクロムファイルのブレークポイントがヒットしない

Question

ソースタブのchrome開発ツールを使用してポイントすると、ソース.jsファイル（ソースマップ経由でロード）にブレークポイントがあります。ときどき、フォーマットボタン{}をクリックしてもヒットすることがありますが、そのヒットとミスが発生することがあります。

アイデア？

"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"] 
    } 
}; 

Answer 1

コメントdevtool

//devtool: 'source-map', 

プラグイン

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

Answer 2

に追加これはissue with webpack and chrome in the past that was brought upのようです。

暫定的な解決策は、それがdevtoolsource-mapかinline-source-mapのオプションが、ノートを設定する設定した、これはあなたのコンパイル時間が増加する原因となります。

ウェブパック3以降、問題は改善されましたが、問題はChromeとWebpackのコードベースの変更に伴う相互作用にあります。

devtool: 'cheap-module-source-map'