Ajay Gaur Ajay Gaur - 1 year ago 120
React JSX Question

Webpack: Files not showing in the browser DevTool

I am trying to setup a project using webpack/react/redux etc. I have setup the project but I can't see the project files in the dev-tools in my browser. I searched online and found that using

debug : true,
devtool : 'source-map'

in my webpack config file will make files appear in dev-tools but they still ain't showing up. I can only see my
in dev-tools

My whole webpack.config.js file is:

var webpack = require('webpack');

module.exports = {
entry: [
output: {
path: require("path").resolve("./dist"),
filename: 'bundle.js',
publicPath: '/'
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
debug: true,
devtool: 'source-map',
module: {
preLoaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
loaders: [
test: /\.js$/,
loader: 'babel-loader',
excludes: /node_modules/,
query: {
presets: ['react', 'es2015', 'react-hmre'] //query will tell what bable-loader has to do, which is compiling JSX(react) and es2015
eslint: {
configFile: './.eslintrc'

How can I see all the project files in devtools?

Answer Source

Nothing wrong with your webpack configuration.

Since you are able to see bundle.js file, obviously there should be a webpack:// folder. Under that, you could see a folder with name .. Expand that, you might see your source files.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download