devpackサーバーを使用しているときにWebpack生成のサルマップに問題がある

Question

webpackが以下の設定でsourcemapを生成するかどうかはわかりません。

「はい」の場合はどこですか？

ブラウザのデバッグウィンドウ（図参照）から見つけることができません。 Chromeはソースマップを検出すると言いますが、見つけられません。何が問題ですか ？

publicディレクトリはどこですか？

また、生成されたbundle.jsはどこにありますか？それはpublic（私は手動で作成しました - それが問題を解決することを望む）にもありません。

アイデア？

すべての情報源はgithubでhereです。

Jozsefs-MBP:react-webpack-babel joco$ npm start 

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel 
> webpack-dev-server --progress --profile --colors 

70% 1/1 build modules http://127.0.0.1:8888/ 
webpack result is served from/
content is served from ./public 
404s will fallback to /index.html 
4826ms build modules 
9ms seal 
7ms optimize 
13ms hashing 
45ms create chunk assets 
15ms additional chunk assets 
1723ms optimize chunk assets 
117ms optimize assets 
36ms emit 
^C 
Jozsefs-MBP:react-webpack-babel joco$ npm start 

> react-webpack-babel@0.0.3 start /Users/joco/dev/react/redux/egghead-tutorial/react-webpack-babel 
> webpack-dev-server --progress --profile --colors 

70% 1/1 build modules http://127.0.0.1:8888/ 
webpack result is served from/
content is served from ./public 
404s will fallback to /index.html 
4747ms build modules 
9ms seal 
7ms optimize 
13ms hashing 
40ms create chunk assets 
16ms additional chunk assets 
93ms optimize chunk assets 
126ms optimize assets 
29ms emit 
^C 
Jozsefs-MBP:react-webpack-babel joco$ ls 
LICENSE       npm-debug.log     src 
README.md      package.json     webpack.config.js 
flow-typed      postcss.config.js    webpack.loaders.js 
node_modules     public       webpack.production.config.js 
Jozsefs-MBP:react-webpack-babel joco$ ls public/ 
fasz 
Jozsefs-MBP:react-webpack-babel joco$ cat webpack.config.js 
"use strict"; 
var webpack = require('webpack'); 
var path = require('path'); 
var loaders = require('./webpack.loaders'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

const HOST = process.env.HOST || "127.0.0.1"; 
const PORT = process.env.PORT || "8888"; 

// global css 
loaders.push({ 
     test: /[\/\\](node_modules|global)[\/\\].*\.css$/, 
     loaders: [ 
       'style?sourceMap', 
       'css' 
     ] 
}); 
// local scss modules 
loaders.push({ 
     test: /[\/\\]src[\/\\].*\.scss/, 
     exclude: /(node_modules|bower_components|public)/, 
     loaders: [ 
       'style?sourceMap', 
       'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]', 
       'postcss', 
       'sass' 
     ] 
}); 

// local css modules 
loaders.push({ 
     test: /[\/\\]src[\/\\].*\.css/, 
     exclude: /(node_modules|bower_components|public)/, 
     loaders: [ 
       'style?sourceMap', 
       'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' 
     ] 
}); 

module.exports = { 
     entry: [ 
       `webpack-dev-server/client?http://${HOST}:${PORT}`, 
       `webpack/hot/only-dev-server`, 
       `./src/index.jsx` // Your appʼs entry point 
     ], 
     devtool: process.env.WEBPACK_DEVTOOL || 'cheap-module-source-map', 
     output: { 
       path: path.join(__dirname, 'public'), 
       filename: 'bundle.js' 
     }, 
     resolve: { 
       extensions: ['', '.js', '.jsx'] 
     }, 
     module: { 
       loaders 
     }, 
     devServer: { 
       contentBase: "./public", 
       // do not print bundle build stats 
       noInfo: true, 
       // enable HMR 
       hot: true, 
       // embed the webpack-dev-server runtime into the bundle 
       inline: true, 
       // serve index.html in place of 404 responses to allow HTML5 history 
       historyApiFallback: true, 
       port: PORT, 
       host: HOST 
     }, 
     plugins: [ 
       new webpack.NoErrorsPlugin(), 
       new webpack.HotModuleReplacementPlugin(), 
       new HtmlWebpackPlugin({ 
         template: './src/template.html' 
       }), 
     ] 
}; 
Jozsefs-MBP:react-webpack-babel joco$ 

Answer 1

のWebPACKのオプションにこれを追加してみてください：

devtool: 'sourcemap' 

それは私のために動作します。一般的な値 '＃eval-source-map'は（Webサーバでは特に）ありません。