Webpackで動作しないソースマップ

Question

私はwebpackには新しく、必要なソースマップを作成するためにいくつかの問題を抱えています。ここで

は私webpack.config.jsです：デベロッパーツールでは、

ソースマップが

を検出したが、それは元のコードをバンドルを示していないと言う

module.exports = { 
    entry: [ 
    'webpack-dev-server/client?http://localhost:8080/', 
    'webpack/hot/dev-server', 
    "./src/index.js" 
    ], 
    output: { 
    filename: 'bundle.js', 
    path: '/', 
    }, 
    debug: true, 
    devtool: 'source-map', 
    resolve: { 
    extensions: ['', '.jsx', '.scss', '.js', '.json'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /(\.js|\.jsx)$/, 
     exclude: /node_modules/, 
     loaders: ['react-hot','babel'] 
     }, 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
     } 
    ] 
    }, 
    devServer: { hot: true }, 
    plugins: [ new webpack.HotModuleReplacementPlugin() ], 
    inline: true, 
    progress: true, 
    colors: true 
}; 

これは私のパックですage.json：

{ 
    "name": "react-template", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js", 
    "test:bundle": "./node_modules/.bin/tape test/bundle.js", 
    "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js" 
    }, 
    "devDependencies": { 
    "babel-loader": "^6.2.1", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-preset-react": "^6.3.13", 
    "babel-preset-stage-0": "^6.3.13", 
    "css-loader": "^0.23.1", 
    "node-sass": "^3.8.0", 
    "on-build-webpack": "^0.1.0", 
    "react": "^0.14.6", 
    "react-dom": "^0.14.6", 
    "react-hot-loader": "^1.3.0", 
    "sass-loader": "^3.2.1", 
    "style-loader": "^0.13.0", 
    "tape": "^4.4.0", 
    "webpack": "^1.12.12", 
    "webpack-dev-server": "^1.14.1" 
    } 
} 

私はdevtoolオプションの複数のバリエーションを試してみましたが、this、thisとthisが、運を読みました。

助けがあれば助かります。

Answer 1

bundle.jsには、元の蒸散ウェブパックバンドルが表示されます。これは正常な動作です。

webpack://を開くと、プロジェクトファイルが表示されます。

Answer 2

following`

devtoolファイルwebpack.config.jsあなたの中に追加してください：あなたは明確な情報を見つけることができます "＃インラインソースマップ"、

をウェブパックのサイトからそれについてhttps://webpack.github.io/docs/configuration.html

また、sourcemapの添付ファイルのスクリーンショット、webパックサイト。