⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要。
当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle,所以 追踪这一错误会很不方便。
Source maps 试图解决这一问题。它有很多选择,各有优劣:
devtool | build | rebuild | production | quality |
---|---|---|---|---|
eval | +++ | +++ | no | generated code |
cheap-eval-source-map | + | ++ | no | transformed code (lines only) |
cheap-source-map | + | o | yes | transformed code (lines only) |
cheap-module-eval-source-map | o | ++ | no | original source (lines only) |
cheap-module-source-map | o | - | yes | original source (lines only) |
eval-source-map | -- | + | no | original source |
source-map | -- | -- | yes | original source |
nosources-source-map | -- | -- | yes | without source content |
表示较快,
- +
表示较慢,
- -
表示时间相同
- o
对于开发环境,通常希望更快速的 Source Map,需要添加到 bundle 中以增加体积为代价,但是对于生产环境,则希望更精准的 Source Map,需要从 bundle 中分离并独立存在。
个人建议:开发环境使用
;开发环境使用
- cheap-module-eval-source-map
。
- cheap-module-source-map
使用方式非常简单,在
中配置如下:
- webpack.config.js
- module.exports = {
- // 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
- // devtool: "eval", // 没有模块映射,而是命名模块。以牺牲细节达到最快。
- // devtool: "source-map", // 牺牲了构建速度的 `source-map' 是最详细的
- // devtool: "inline-source-map", // 嵌入到源文件中
- // devtool: "eval-source-map", // 将 SourceMap 嵌入到每个模块中
- // devtool: "hidden-source-map", // SourceMap 不在源文件中引用
- // devtool: "cheap-source-map", // 没有模块映射(module mappings)的 SourceMap 低级变体(cheap-variant)
- // devtool: "cheap-module-source-map", // 有模块映射(module mappings)的 SourceMap 低级变体
- devtool: "cheap-module-eval-source-map",
- };
webpack-dev-server 可以提供了一个服务器和实时重载(live reloading) 功能。
在开始前,确定你有一个
文件指向你的 bundle。假设
- index.html
是
- output.filename
。
- bunlde.js
- <html>
- <body>
- <script type="text/javascript" src="./dist/bundle.js">
- </script>
- </body>
- </html>
首先从 npm 安装
:
- webpack-dev-server
- $npminstall --save-dev webpack-dev-server
安装完成之后,你应该可以使用
了,方式如下:
- webpack-dev-server
- $webpack-dev-server--open
上述命令应该自动在浏览器中打开
。
- http://localhost:8080
来源: http://www.cnblogs.com/jingmoxukong/p/7018671.html