我使用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对我有用。
编辑2：//
现在我使用这个webpack配置
采用
webpack-dev-server -d-d是的简写--debug --devtool source-map --output-pathinfo。output-pathinfo在生成的捆绑软件中添加注释，以说明哪些模块/文件包含在什么位置。因此，在生成的代码中，将注释添加到以下代码行：require(/* ./test */23)这表示23指向test模块。当您查看Webpack生成的代码时，这最有帮助，而逐步调试器时则没有太大帮助。我从相关的文档中得到了这个示例。这全部有效，因为
webpack-dev-server接受与相同的所有标志webpack。提示与陷阱
--content-base-默认情况下，开发服务器将在运行命令的目录中提供文件。如果构建文件位于中build/，则需要指定，--content-base build/以便开发服务器将在build目录中提供文件--inline-只要您保存文件并进行一些更改，就会自动重新加载！