Webpack 开发工具与模块热替换

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。

​