Webpack-dev-server不会生成源地图
我使用babel-loader ，但无法弄清楚如何生成或在哪里查找转发文件的源地图。 我尝试了eval-source-map ， inline-source-map ， source-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部分的附件截图。
