Webpack-dev-server不会生成源地图

我使用babel-loader ,但无法弄清楚如何生成或在哪里查找转发文件的源地图。 我尝试了eval-source-mapinline-source-mapsource-map

webpack.config.js

 const BowerWebpackPlugin = require("bower-webpack-plugin"); module.exports = { entry: './src/script/index.jsx', output: { filename: 'bundle.js', sourceMapFilename: "bundle.js.map", publicPath: 'http://localhost:8090/assets' }, debug: true, devtool: 'inline-source-map', module: { loaders: [ { test: /\.js[x]?$/, loaders: ['react-hot', 'jsx', 'babel'], exclude: /node_modules/ }, { test: /\.scss$/, loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ] }, { test: /\.less$/, loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ] }, { test: /\.css$/, loaders: [ 'style', 'css'] }, { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.woff2$/, loader: "url-loader?limit=10000&mimetype=application/font-woff2" }, { test: /\.(eot|ttf|svg|gif|png)$/, loader: "file-loader" } ] }, plugins: [ new BowerWebpackPlugin() ], externals: { //don't bundle the 'react' npm package with our bundle.js //but get it from a global 'React' variable 'react': 'React' }, resolve: { extensions: ['', '.js', '.jsx'] } } 

的package.json

  { "name": "Won", "version": "0.0.1", "description": "Internal evidence application", "main": "index.jsx", "scripts": { "start": "npm run serve | npm run dev", "serve": "./node_modules/.bin/http-server -p 8080", "dev": "webpack-dev-server -d --progress --colors --port 8090" }, "author": "And", "license": "ISC", "devDependencies": { "babel-core": "^5.8.23", "babel-loader": "^5.3.2", "bootstrap": "^3.3.5", "bootstrap-select": "^1.7.3", "bootstrap-table": "^1.8.1", "bower-webpack-plugin": "^0.1.8", "colresizable": "^1.5.2", "css-loader": "^0.16.0", "events": "^1.0.2", "extract-text-webpack-plugin": "^0.8.2", "file-loader": "^0.8.4", "flux": "^2.1.1", "http-server": "^0.8.0", "jquery": "^2.1.4", "jquery-ui": "^1.10.5", "json-markup": "^0.1.6", "jsx-loader": "^0.13.2", "less": "^2.5.1", "less-loader": "^2.2.0", "lodash": "^3.10.1", "node-sass": "^3.2.0", "object-assign": "^4.0.1", "path": "^0.11.14", "react": "^0.13.3", "react-hot-loader": "^1.2.9", "sass-loader": "^2.0.1", "style-loader": "^0.12.3", "svg-sprite-loader": "0.0.2", "url-loader": "^0.5.6", "webpack": "^1.12.0", "webpack-dev-server": "^1.10.1" } } 

编辑://

毕竟这个webpack.config.js和这个package.json适合我。

EDIT2://

现在我使用这个webpackconfiguration

使用webpack -d

d标志代表开发的快捷方式,它使您的所有开发人员工具,如源地图。

使用webpack-dev-server -d

  • -d--debug --devtool source-map --output-pathinfo简写。
  • output-pathinfo将注释添加到生成的包中,以解释什么地方包含哪些模块/文件。 所以在生成的代码中,注释被添加到这行代码中: require(/* ./test */23)其中23表示指向test模块。 当你查看Webpack生成的代码时,这是非常有用的,而不是在单步执行debugging器时。 我从这个相关的文档中得到了这个例子。

  • 这一切都有效,因为webpack-dev-server接受所有与webpack相同的标志。

  • 有关详细信息, 请参阅文档中的此部分 。

提示和疑难问题

  • --content-base – 默认情况下,开发服务器将为您运行该命令的目录中的文件提供服务。如果您的构build文件在build/ ,则需要指定--content-base build/ ,dev服务器将提供生成目录中的文件
  • --inline – 自动重新加载,每当你保存一个文件的一些变化!

{devtool:"source-map"}到您的webpack.config.js中

在这里看到更多

请在webpack.config.js文件中添加以下内容

devtool:“#lineline-source-map”,

你可以从webpack的网站上find清楚的信息https://webpack.github.io/docs/configuration.html

也请从webpack站点查找sourcemap部分的附件截图。

在这里输入图像说明