Ajay Gaur Ajay Gaur - 7 days ago 4
React JSX Question

Webpack: Files not showing in the browser console

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
bundle.js
in dev-tools

My whole webpack.config.js file is:

var webpack = require('webpack');

module.exports = {
entry: [
'webpack-hot-middleware/client',
'./client/client.js'
],
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

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 couold see a folder with name .. Expand that, you might see your source files.