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. IOC容器的依赖注入

    1.依赖注入发生的时间 当Spring IoC容器完成了Bean定义资源的定位.载入和解析注册以后,IoC容器中已经管理类Bean定义的相关数据,但是此时IoC容器还没有对所管理的Bean进行依赖注入 ...

  2. Machine Learning——Supervised Learning（机器学习之监督学习）

    监督学习是指:利用一组已知类别的样本调整分类器的参数,使其达到所要求性能的过程. 我们来看一个例子:预测房价(注:本文例子取自业界大牛吴恩达老师的机器学习课程) 如下图所示:横轴表示房子的面积,单位是 ...

  3. [进程管理]Linux进程状态解析之T、Z、X

             Linux进程状态:T (TASK_STOPPED or TASK_TRACED),暂停状态或跟踪状态.          向进程发送一个SIGSTOP信号,它就会因响应该信号而进入 ...

  4. 使用 rsync 同步

    原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...

  5. 线段树区间更新操作及Lazy思想(详解)

    此题题意很好懂:  给你N个数,Q个操作,操作有两种,‘Q a b ’是询问a~b这段数的和,‘C a b c’是把a~b这段数都加上c. 需要用到线段树的,update:成段增减,query:区间求 ...

  6. 【算法系列学习】巧妙建图，暴搜去重 Counting Cliques

    E - Counting Cliques http://blog.csdn.net/eventqueue/article/details/52973747 http://blog.csdn.net/y ...

  7. POJ1006: 中国剩余定理的完美演绎（非原创）

    问题描述 人自出生起就有体力,情感和智力三个生理周期,分别为23,28和33天.一个周期内有一天为峰值,在这一天,人在对应的方面(体力,情感或智力)表现最好.通常这三个周期的峰值不会是同一天.现在给出 ...

  8. 版本管理工具SVN学习（一）：简单的SVN命令，兼对比Git

    新公司用SVN来管理代码,而且公司自己搭建了SVN服务器,所以要学习下SVN的相关命令.服务器搭建等技能知识.上家公司是用Git管理代码,而且代码托管在git@oschina上,自然不用操心Git服务 ...

  9. Android的cookie的接收和发送

    我在做自动登录的时候遇到的坑,特写此文以提醒各位不要把自己绕进去了. 我们都知道在web端的cookie是可以通过服务器端设置保存的,默认是关闭浏览器就清除cookie的,但是可以在服务器端设置coo ...

  10. ConcurrentSkipListMap深入分析

    1.前言 ConcurrentHashMap与ConcurrentSkipListMap性能测试 在4线程1.6万数据的条件下,ConcurrentHashMap 存取速度是ConcurrentSki ...