在使用dev服務器時webpack生成sourmaps時遇到問題

我不確定webpack是否應該使用下面給定的配置生成源映射。在使用dev服務器時webpack生成sourmaps時遇到問題

如果是，我應該在哪裏找到它？

我無法從瀏覽器調試窗口找到它（見圖片）。 Chrome說它會檢測源地圖，但我找不到它們。問題是什麼？

public目錄是空的，所以它可能在哪裏？

另外，我在哪裏可以找到生成的bundle.js？它也不在public（我手動創建 - 希望它可以解決問題）。

任何想法？

在github上可以找到所有的信息來源here。

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

> [email protected] 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 

> [email protected] 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$

來源

2016-11-12 jhegedus

嘗試加入到這一點的WebPack的選擇：

devtool: 'sourcemap'

它爲我工作。而共同價值'＃eval-source-map'沒有（特別是在網絡服務器中）。

來源

2017-07-21 11:33:03 Shrike

在使用dev服務器時webpack生成sourmaps時遇到問題

回答

相關問題