I have a breakpoint in a source .js file (loaded via source maps) that when I point to in with chrome dev tools in source tab, it is not hit. Sometimes I can get them to be hit if I click the format button {} but its hit and miss.
Any ideas?
"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"]
}
};
So this seems to be an issue with webpack and chrome in the past that was brought up.
The interim solution was to set it set the devtool
option to source-map
or inline-source-map
but note, this will cause your compile time to increase.
As of Webpack 3 the issue has improved, but the problem is in the interplay between Chrome and Webpack with their changing code bases.
With Webpack 3 I've had success with the following configuration:
devtool: 'cheap-module-source-map'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With