Webpack-dev-server 不生成源映射
Posted
技术标签:
【中文标题】Webpack-dev-server 不生成源映射【英文标题】:Webpack-dev-server doesn't generate source maps 【发布时间】:2015-11-24 15:29:00 【问题描述】:我使用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
【问题讨论】:
请注意,如果您使用的是 Babel,则跳过 jsx-loader。所以只需['hot-loader', 'babel']
就足够了。 Babel 默认支持 JSX。
这方面有什么进展吗?我遇到了同样的问题。谢谢。
@Pathsofdesign 对我来说现在可以工作,但我不知道我改变了什么。如果你愿意,我可以把我的 webpack.config 和 package.json 发给你。
@Matt 我当然会赞成一个包含您更新的 webpack.config 和 package.json 的答案。 :-)
@GabrielKunkel 请查看我编辑的问题。有我的 webpack.config 和 package.json 对我有用
【参考方案1】:
使用webpack-dev-server -d
-d
是 --debug --devtool source-map --output-pathinfo
的简写。
output-pathinfo
将 cmets 添加到生成的包中,解释哪些模块/文件包含在哪些位置。所以在生成的代码中,注释被添加到这行代码中:require(/* ./test */23)
表示23
指向test
模块。当您查看 Webpack 生成的代码时,这非常有用,而在单步调试器中则没有太大帮助。我得到了这个例子from this relevant bit of documentation。
这一切都有效,因为webpack-dev-server
接受与webpack
相同的所有标志。
提示和注意事项
--content-base
- 默认情况下,开发服务器将在您运行命令的目录中提供文件。如果您的构建文件在 build/
中,您需要指定 --content-base build/
以便开发服务器将在 @987654335 中提供文件@目录
--inline
- 每当您保存带有一些更改的文件时自动重新加载!
【讨论】:
output-pathinfo 的实际作用是什么? @angrykiwi 更新了我的答案,谢谢!另外,顺便说一句,好名字;)【参考方案2】:使用webpack -d
d
标志代表开发快捷方式,它启用您的所有开发人员工具,例如源映射。
【讨论】:
Webpack 为 scss 文件生成源映射,但不为 jsx 文件生成源映射。请看我编辑的帖子,我附上了我的 package.json @CpILL 它对我有用,我跑了node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build
@ryeguy 在 webpack 2 上?
@CpILL 不,我正在运行 webpack 1.13.3 和 webpack-dev-server 1.16.2【参考方案3】:
将devtool:"source-map"
添加到您的webpack.config.js
查看更多here
【讨论】:
感谢您的链接,我发现在我的 webpack 配置中它是cheap-module-eval-source-map
,但它不起作用,我尝试了此链接中的其他几个选项,现在与 eval-source-map
一起使用效果很好
我也遇到了cheap-module-eval-source-map
的问题。其他类型对我来说很好。【参考方案4】:
请在 webpack.config.js 文件中添加以下内容`
devtool: "#inline-source-map",
你可以在webpack的网站上找到明确的信息`https://webpack.github.io/docs/configuration.html
另外,请从 webpack 站点找到 sourcemap 部分的附加屏幕截图。
【讨论】:
【参考方案5】:我所做的只是改变:
// 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
【讨论】:
以上是关于Webpack-dev-server 不生成源映射的主要内容,如果未能解决你的问题,请参考以下文章
Firefox 开发者工具不适用于 Webpack CSS 源映射
Chrome 不读取由 elixir browserify 生成的源映射