为什么我在我的chorme devtools中看不到ES6?

时间:2016-12-13 12:11:28

标签: reactjs webpack redux google-chrome-devtools webpack-dev-server

enter image description here

这就是我在Chrome中看到的

这是我的 webpack.config.js

module.exports = {
  entry: {
    vendors: [...],
    bundle: './app/index.js',
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js',
    sourceMapFilename: "[name].js.map",
  },
  module: {
    loaders: [{
      test: /\.json$/,
      loaders: ['json-loader'],
    },{ 
      test: /\.(js)$/,
      loader: 'string-replace',
      exclude: /node_modules/,
      query: {
        search: '/api/',
        replace: !!apiUrl ? `${apiUrl}:${apiPortNumber}/api/` :   '/api/',
        flags: 'g'
      }
    },{
      test: /\.(js)$/,
      loader: 'string-replace',
      exclude: /node_modules/,
      query: {
        search: '/dev-sse/',
        replace: `${apiUrl}:`,
        flags: 'g'
      }
    },{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        cacheDirectory: true,
        plugins: ['transform-runtime', 'transform-decorators-legacy'],
        presets: ['es2015', 'react', 'stage-0']
      }
    }
  ]
},
plugins: [
  new webpack.optimize.CommonsChunkPlugin('vendors', 'commons.js'),
  new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
  }),
  new CopyWebpackPlugin([
    { from: './assets/**/*' }
  ])
],
  devtool: 'cheap-module-eval-source-map',
};

我尝试在各种值上更改devtools,但最后我得到的相同,项目也使用 webpack-dev-server

所以我想知道我哪里可以犯错误

我想要什么 enter image description here

1 个答案:

答案 0 :(得分:0)

将devtool更新为devtool: 'eval-source-map'