没有 webpack 开发服务器的 webpack jsx 源映射答案

【问题标题】：webpack jsx source maps without webpack dev server没有 webpack 开发服务器的 webpack jsx 源映射
【发布时间】：2017-05-12 05:03:11
【问题描述】：

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

我尝试了一些配置组合，包括使用 webpack. SourceMapDevToolPlugin 和使用不同类型的 devtool 源映射，但都没有成功。

这个项目是一个 chrome 扩展，所以由于环境限制我无法使用 webpack 开发服务器，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'
    })
  ]
}];

【问题讨论】：

标签： webpack babeljs jsx source-maps

【解决方案1】：

从 loaders 配置中删除不受支持的 jsx 加载程序解决了问题！

【讨论】：