Webpack 开发工具与模块热替换
⚠️ 注意：
永远不要在生产环境中使用这些工具，永远不要。
devtool
当 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
webpack-dev-server 可以提供了一个服务器和实时重载（live reloading） 功能。
在开始前，确定你有一个 index.html 文件指向你的 bundle。假设 output.filename 是 bunlde.js。
<html>
<body>
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>首先从 npm 安装 webpack-dev-server：
$ npm install --save-dev webpack-dev-server安装完成之后，你应该可以使用 webpack-dev-server 了，方式如下：
$ webpack-dev-server --open上述命令应该自动在浏览器中打开 http://localhost:8080。
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
