沒有webpack dev服務器的webpack jsx源地圖

Question

我無法獲取webpack以使用jsx文件從原始源創建源地圖。使用devtool: 'source-map'我可以在其原始es6代碼中獲得源地圖以輸出js文件，但jsx文件源地圖將映射到它們的es5損壞格式。

我已經嘗試了一些配置組合，包括使用webpack. SourceMapDevToolPlugin和使用不同類型的devtool源地圖，但沒有運氣。

該項目是一個鉻擴展，所以由於受限制的環境，我無法使用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' 
    }) 
    ] 
}]; 

Answer 1

去除loaders配置不支持的JSX裝載機固定的問題！