我使用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://
现在我使用this webpack config
答案 0 :(得分:38)
使用webpack-dev-server -d
-d
是--debug --devtool source-map --output-pathinfo
。 output-pathinfo
为生成的包添加注释,说明哪些模块/文件包含在哪些位置。因此,在生成的代码中,注释会添加到以下代码行:require(/* ./test */23)
,表示23
指向test
模块。当您查看Webpack生成的代码时,这非常有用,而不是在单步执行调试器时。我得到了这个例子from this relevant bit of documentation。
这一切都有效,因为webpack-dev-server
接受与webpack
相同的所有标记。
--content-base
- 默认情况下,开发服务器将在您运行命令的目录中提供文件。如果您的构建文件位于build/
,则需要指定--content-base build/
以便开发服务器将提供build
目录--inline
- 每当您保存文件并进行一些更改时自动重新加载!答案 1 :(得分:27)
使用webpack -d
d
标志代表开发快捷方式,它支持所有开发人员工具,例如源地图。
答案 2 :(得分:4)
将{devtool:"source-map"}
添加到 webpack.config.js
查看更多here
答案 3 :(得分:1)
请在webpack.config.js文件中添加以下内容。
devtool:“#inline-source-map”,
您可以在webpack` https://webpack.github.io/docs/configuration.html
的网站上找到有关它的明确信息另请参阅webpack网站上的sourcemap部分的附加截图。
答案 4 :(得分:0)
我所做的就是改变:
// package.json
{
...
**from** "dev:serve": "webpack-dev-server",
**to** "dev:serve": "webpack-dev-server -d",
...
}
相当于:$ webpack-dev-server -d
现在我可以在Chrome中使用Ctrl + p
,我会看到我的ES6语法设置断点。
信息
$ webpack-dev-server --version
webpack-dev-server 2.9.7
webpack 3.10.0