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. codeforces 528D Fuzzy Search

    链接:http://codeforces.com/problemset/problem/528/D 正解:$FFT$. 很多字符串匹配的问题都可以用$FFT$来实现. 这道题是要求在左边和右边$k$个 ...

  2. 【转】为什么delete以后指针还能被赋值

    首先,系统知道哪一部分堆的线性空间被占掉了,new就是起这个作用,仅仅是声明一下(可能多了一个功能),因为堆的空间不一定是直接从系统调用获得的,堆的空间是这样管理的:程序先伸请一个大的堆空间,这个时候 ...

  3. 如何做一个导航栏————浮动跟伪类（hover）事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  4. Linux下安装单机版zookeeper（和dubbo配合验证）和redis（用图形化界面连接验证）

    上次写了篇zookeeper的集齐,并且用dubbo admin验证了集群结果.最近又特地装了个虚拟机,专门装各种单机版的,免得跟集群的机器混合了.安装的虚拟机IP为192.168.1.108 1.单 ...

  5. scrapy（一）建立一个scrapy项目

    本项目实现了获取stack overflow的问题,语言使用python,框架scrapy框架,选取mongoDB作为持久化数据库,redis做为数据缓存 项目源码可以参考我的github:https ...

  6. final的用法

    先来看一段代码 class Car extends Vehicle {     public static void main (String[] args)     {         new  C ...

  7. oracle高效分页查询总结

    本文参考链接:http://blog.sina.com.cn/s/blog_8604ca230100vro9.html 探索查询语句: --分页参数:size = 20 page = 2 --没有or ...

  8. coding.net及git的使用方式

    一般部分测试的公司里可能会用到代码管理工具,这里可能不得不推荐coding.net和git这个工具,类似于svn,不过用命令行的情况多点 这里简单介绍下 1.建立coding.net 首先新建一个co ...

  9. Hive load from hdfs 出错

    hive 加载HDFS的数据时出现错误, FATAL:SemanticException [Error 10028] search了一下,跟他一样Hive load from hdfs 出错. 我按照 ...

  10. Natas Wargame Level20 Writeup（会话状态注入/篡改）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAArMAAACmCAYAAADJYwcaAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF