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. CSS3 制作网格动画效果

    在线演示      源码下载

  2. 卷积神经网络CNN总结

    从神经网络到卷积神经网络(CNN)我们知道神经网络的结构是这样的: 那卷积神经网络跟它是什么关系呢?其实卷积神经网络依旧是层级网络,只是层的功能和形式做了变化,可以说是传统神经网络的一个改进.比如下图 ...

  3. Jenkins + Maven + Ansible + Tomcat 实现JAVA代码自动部署

    自动部署过程: jenkins从svn拉取代码,调用maven去打war包,用ansible去解压war包,最后重启tomcat. 前情回顾:在前面的文章我的环境已经有Jenkins+ansible ...

  4. linux 内核的spinlock

    spinlock设计成了三层,第一层是接口,第二层raw实现层,第三层是CPU平台层.在第二层raw实现层提供了两个分支,分别是单CPU和多CPU(核).第三层是不同CPU的锁操作实现.raw层除了调 ...

  5. C#集合之有序列表

    如果需要基于键对所需集合排序,就可以使用SortedList<TKey,TValue>类.这个类按照键给元素排序.这个集合中的值和键都可以使用任何类型.定义为键的自定义类型需要实现ICom ...

  6. cookie值的设置，获取及删除

    <script> function setCookie( key, val, expire){ var dateTime = new Date(); dateTime.setTime( d ...

  7. ［转］shell awk 入门，中级，高级使用

    awk很常用,对于我们在shell中分析log和file很有好处,很实用的东西,大家一起分享学习- 作为技术支持工程师,我们最最经常的工作就是要处理文本文件,不管是什么数据库最后都可以导成文本,我们就 ...

  8. StringTokenizer使用笔记

    StringTokenizer 基本使用 笔者最近在做算数表达式的逆波兰式转换和解析,原始表达式为String类型,在使用StringTokenizer 之前笔者的解决思路是 将原始表达式->转 ...

  9. AsyncTask和Handler

    AsyncTask实现的原理和适用的优缺点 AsyncTask,是android提供的轻量级的异步类,可以直接继承AsyncTask,在类中实现异步操作,并提供接口反馈当前异步执行的程度(可以通过接口 ...

  10. javaWeb学习总结（11）- 监听器(Listener)学习（2）

    一.监听域对象中属性的变更的监听器 域对象中属性的变更的事件监听器就是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信 ...