Menu
I'm pretty new to webpack and having some trouble configuring it to produce the necessary source maps. In the devtools it says
Source Map detected
but it shows the bundle and not the original code:
Here is my webpack.config.js:
module.exports = { entry: [ 'webpack-dev-server/client?http://localhost:8080/', 'webpack/hot/dev-server', "./src/index.js" ], output: { filename: 'bundle.js', path: '/', }, debug: true, devtool: 'source-map', resolve: { extensions: ['', '.jsx', '.scss', '.js', '.json'] }, module: { loaders: [ { test: /(\.js|\.jsx)$/, exclude: /node_modules/, loaders: ['react-hot','babel'] }, { test: /\.scss$/, exclude: /node_modules/, loaders: ["style", "css?sourceMap", "sass?sourceMap"] } ] }, devServer: { hot: true }, plugins: [ new webpack.HotModuleReplacementPlugin() ], inline: true, progress: true, colors: true }; And here is my package.json:
{ "name": "react-template", "version": "1.0.0", "main": "index.js", "scripts": { "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js", "test:bundle": "./node_modules/.bin/tape test/bundle.js", "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js" }, "devDependencies": { "babel-loader": "^6.2.1", "babel-preset-es2015": "^6.3.13", "babel-preset-react": "^6.3.13", "babel-preset-stage-0": "^6.3.13", "css-loader": "^0.23.1", "node-sass": "^3.8.0", "on-build-webpack": "^0.1.0", "react": "^0.14.6", "react-dom": "^0.14.6", "react-hot-loader": "^1.3.0", "sass-loader": "^3.2.1", "style-loader": "^0.13.0", "tape": "^4.4.0", "webpack": "^1.12.12", "webpack-dev-server": "^1.14.1" } } I've tried multiple variations of the devtool option and read this, this and this but no luck.
Any help would be great!
676
In a sense, source maps are the decoder ring to your secret (minified) code. Using Webpack, specifying devtool: "source-map" in your Webpack config will enable source maps, and Webpack will output a sourceMappingURL directive in your final, minified file.
Enabling source maps in webpackgenerateSourceMaps({ type: "source-map" }), ]); source-map is the slowest and highest quality option of them all, but that's fine for a production build. If you build the project now ( npm run build ), you should see source maps in the project output at the dist directory.
The only workaround is to manually change the map URL to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
You can view it by going to Settings -> Symbol Mapping -> Source Maps in your Rollbar project. This screen shows all attempt to access source maps, both successful and unsuccessful. It includes a search feature that can be used to look for source maps for specific Javascript files.
In bundle.js you will see original transpiled webpack bundle - this is normal behaviour.
Open webpack:// and you will see your project files.
122
Add the following in your webpack.config.js file:
devtool: "#inline-source-map", You can find clear information about it from the webpack website: https://webpack.js.org/configuration/devtool/
Also please find attached screenshot of sourcemap part from the webpack website.
21
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