Question

我无法让webpack使用jsx文件从原始源创建源映射。使用devtool: 'source-map'我可以在其原始es6代码中获取源地图以打印出js个文件，但jsx个文件源地图会映射到其es5错位格式。

我尝试了一些配置组合，包括使用webpack. SourceMapDevToolPlugin并使用不同类型的devtool源地图而没有运气。

此项目是Chrome扩展程序，因此由于环境限制，我无法使用webpack dev服务器eval-source-map。

以下是我的webpack配置：

let path = require('path');
let webpack = require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = [{
  devtool: 'source-map',
  entry: {
    app: './' + path.join('src', 'app'),
    vendor: [
      'react',
      'react-dom',
      'react-redux',
      'redux',
      'redux-thunk'
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'client.js'
  },
  module: {
    preLoaders: [{
      test: /\.jsx?$/,
      loader: 'babel',
      query: {
        plugins: [
          'syntax-jsx',
          'transform-react-jsx'
        ],
        presets: [
          'latest',
          'react',
          'stage-3'
        ]
      }
    }],
    loaders: [{
      test: /\.jsx$/,
      loader: 'jsx'
    }]
  },
  resolve: {
    extensions: [
      '',
      '.js',
      '.jsx'
    ],
    root: [
      path.resolve('./src')
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new HtmlWebpackPlugin({
      title: 'Bookmarks'
    })
  ]
}];

Answer 1

从loaders config删除不受支持的jsx加载程序修复了问题！

没有webpack dev服务器的webpack jsx源映射

1 个答案: