I punti di interruzione nei file in chrome non vengono colpiti quando si usano le webmap sourcap

Question

Ho un punto di interruzione in un file .js di origine (caricato tramite mappe sorgente) che quando si punta con gli strumenti di chrome dev nella scheda sorgente, non viene colpito. A volte riesco a farli colpire se faccio clic sul pulsante di formattazione {} ma è un errore.

Qualche idea?

"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

commento DevTool

//devtool: 'source-map', 

Aggiungi plugin

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

Answer 2

Quindi questo sembra essere un issue with webpack and chrome in the past that was brought up.

La soluzione provvisoria era impostare l'opzione devtool su source-map o inline-source-map ma nota, questo farà aumentare il tempo di compilazione.

A partire da Webpack 3 il problema è migliorato, ma il problema è nell'interazione tra Chrome e Webpack con le loro basi di codice che cambiano.

Con Webpack 3 Ho avuto successo con la seguente configurazione:

devtool: 'cheap-module-source-map'