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。

​

Webpack 开发工具与模块热替换的更多相关文章

  1. 【webpack】-- 模块热替换

    全称是Hot Module ReplaceMent(HMR),理解成热模块替换或者模块热替换都可以吧,和.net中的热插拔一个意思,就是在运行中对程序的模块进行更新.这个功能主要是用于开发过程中,对生 ...

  2. 启用 webpack 的模块热替换特性

    启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...

  3. webpack学习_模块热替换(Hot Module Peaplacement)

    模块热替换(Hot Module Replacement 或 HMR) 是webpack提供的最有用的功能之一.允许在u女性是更新各种模块,而无需进行完全刷新. 启用HMR 承接之前的代码 webpa ...

  4. webpack 模块热替换的理解和使用

    模块热替换(webpack文档上也叫 Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时更新各种模块,而无需进行完全刷新. 这句话其实 ...

  5. webpack学习之—— 模块热替换(Hot Module Replacement)

    模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载整个页面.主要是通过以下几种方式,来显著加快开发速度: 保留在完全重 ...

  6. Webpack探索【8】--- 模块热替换详解

    本文主要讲模块热替换相关内容.

  7. 模块热替换 HMR

    devserver:{hot:true},既及时更新代码,样式(需配合loader)变化,自动重编译,只适用于开发环境. 入口文件中,添加监视: + if (module.hot) {+ module ...

  8. webpack开发工具

    source map 用来调试打包后的代码 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack- ...

  9. webpack(6)-模块热替代&tree shaking

    模块热替换(hot module replacement 或 HMR) 模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一.它允许在运行时 ...

随机推荐

  1. C语言学习第三章

    写在课前,提醒自己写代码的时候一定要注意不能漏写符号!提醒自己写代码的时候一定要注意不能漏写符号!提醒自己写代码的时候一定要注意不能漏写符号! 今天主要学习掌握if...else条件结构,多重if条件 ...

  2. JS 部分基础内容总结

    JavaScript 是脚本语言 HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> ...

  3. js判断字符串是否全为空(使用trim函数/正则表达式)

    我们需要判断用户输入的是否全是空格,可以使用以下方法: 方法一: 使用trim() /* 使用String.trim()函数,来判断字符串是否全为空*/ function kongge1(test) ...

  4. JavaScript中undefined 和not defined

    首先呢,我们来介绍undefined,xx is not defined的区别 (创建一个html文件,在头部编写JavaScript代码) 我们先编写如下代码: <script type=&q ...

  5. 如何解决 chrome 58 版本更新导致的 fiddler https 抓包不可用问题

    注意!如果该方法不生效,请先卸载原有 fiddler 后再进行新版本 fiddler 安装步骤即可. chrome 于(上周?上上周?)推送了chrome 58 版本的更新,这次更新中直接去掉了证书未 ...

  6. 阿里云主机试用之自建站点和ftp上传所遇的2个问题

    1.Access to the requested object is only available from the local network 其实我并没有自建站点,只是使用了XAMPP来建了ap ...

  7. Xmind 体验分享

    Xmind 8 体验 初识思维脑图 这两天在学习使用思维脑图(xmind是其中一款软件)ing,在体验了一把思维脑图的使用后,深深感受到了脑洞大开的魔力. 从昨晚开始研究使用,到今天晚上截止,自己试着 ...

  8. 微信公众号开发笔记1(nodejs开发的)

    本篇记录了微信公众号开发的一些笔记 一.微信服务器与我们服务器的交流 微信开发者拥有自己的服务器,在我们服务器上可以与微信服务器进行交流.既然可以交流,那就必定需要前提条件(微信认证),也就是说,只有 ...

  9. webstorm安装与本地激活

    webstorm下载及安装 官方下载地址如下:https://www.jetbrains.com/webstorm/ 安装: 直接双击安装,注意路径中不要出现中文. 激活:(此方法来自网络) 许多人j ...

  10. ubuntu16.04 编译运行 LSD-SLAM

    下载编译LSDSLAM,可能会出现 CreateGlutWindowAndWind is not a member of pangolin 以及 该函数参数报错的问题: 原因是在新的pangolin版 ...