Probleme beim Erstellen von Sourmaps mit dem Webpack bei Verwendung des Dev-Servers

Question

Ich bin mir nicht sicher, ob Webpack eine Quellkarte mit der angegebenen Konfiguration erzeugen soll.

Wenn ja, wo soll ich es finden?

Ich kann es nicht aus dem Browser-Debug-Fenster finden (siehe Bild). Chrome sagt, dass es Quellkarten erkennt, aber ich kann sie nicht finden. Was ist das Problem ?

public Verzeichnis ist leer, also wo könnte es sein?

Wo kann ich auch die generierten bundle.js finden? Es ist auch nicht in public (die ich manuell erstellt habe - in der Hoffnung, dass es das Problem lösen wird).

Irgendwelche Ideen?

Alle Quelle kann here auf Github gefunden werden.

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

Versuchen das Hinzufügen dieser in Optionen webpack suchen:

devtool: 'sourcemap' 

es funktioniert für mich. während der gemeinsame Wert '# eval-source-map' nicht funktioniert (insbesondere im Web-Server).