reactjs - and - webpack react js

Webpack: archivos que no se muestran en el navegador DevTool

Question

Estoy intentando configurar un proyecto usando webpack / react / redux, etc. He configurado el proyecto pero no puedo ver los archivos del proyecto en las herramientas de desarrollo de mi navegador. Busqué en línea y encontré que usando

debug : true,
devtool : ''source-map''

en el archivo de configuración de mi paquete web, los archivos aparecerán en las herramientas de desarrollo, pero aún no se muestran. Solo puedo ver mi bundle.js en dev-tools

Mi archivo webpack.config.js completo es:

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''
  }
};

¿Cómo puedo ver todos los archivos de proyecto en devtools?

Answer 1

No hay nada malo con la configuración de su paquete web.

Como puede ver el archivo bundle.js , obviamente debe haber una carpeta webpack:// . Debajo de eso, puedes ver una carpeta con nombre . . Expanda eso, puede ver sus archivos de origen.