Webpack:文件未显示在浏览器 DevTool 中 [英] Webpack: Files not showing in the browser DevTool

问题描述

我正在尝试使用 webpack/react/redux 等设置项目.我已经设置了项目，但在浏览器的开发工具中看不到项目文件.我在网上搜索，发现使用

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'

在我的 webpack 配置文件中将使文件出现在 dev-tools 中，但它们仍然没有出现.我只能在开发工具中看到我的 bundle.js

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

我的整个 webpack.config.js 文件是:

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

如何查看 devtools 中的所有项目文件?

How can I see all the project files in devtools?

推荐答案

您的 webpack 配置没有问题.

Nothing wrong with your webpack configuration.

既然你能看到bundle.js文件，显然应该有一个webpack://文件夹.在它下面，您可以看到一个名为 . 的文件夹.展开它，您可能会看到源文件.

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.

这篇关于Webpack:文件未显示在浏览器 DevTool 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！