Question

我正在尝试使用webpack / react / redux等设置项目。我已经设置了项目，但是我无法在浏览器中的dev-tools中看到项目文件。我在网上搜索，发现使用

debug : true,
devtool : 'source-map'

在我的webpack配置文件中

会使文件显示在dev-tools中，但它们仍然无法显示。我只能在dev-tools

中看到我的bundle.js

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

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中查看所有项目文件？

Answer 1

您的webpack配置没有错。

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

Webpack：文件未显示在浏览器DevTool中

1 个答案: