浅谈Webpack模块打包工具三

Source Map

生产代码与开发代码完全不同，如果需要调试应用的话会非常的麻烦,错误信息无法定位,Soutce Map就会逆向得到源代码,

须在打包之后的代码文件的末尾位置例如添加//# sourceMappingURL=jquery-3.4.1.min.map字段即开启sourceMap我们就

可以调试Jquery的源代码了打开浏览器调试工具的Source模块也可以看到引入的.js文件，（html引入的.min.js文件）

Webpack配置Source Map

devtool配置我们开发工程中的辅助工具及与source map相关的一些配置,webpack支持12种sourceMap的格式，每种方式的效率

和效果各不相同，如下图所示：

下面对其他模式的sourcemap进行模式对比

1.eval模式：可以运行字符串中的代码eval('console.log(123)') 默认通过在代码中添加 //#sourceURL+路径 的形式定位源码文件这种

模式不会生成sourcemap文件，这种模式的速度是最快的，但是只能定位文件名称,而不知道具体的行列信息。

2.eval-sourceMap：除了可以定位文件 还可以定位行和列的信息,生成了SourceMap。

3.cheap-eval-source-map：定位到行，而没有列的信息。

4.cheap-module-eval-source-map 跟上面的cheap-eval-source-map对比多了个module,对比代码发现module对应源代码，跟我们编

写的源代码是一摸一样的,而上面的则是编译成ES5的代码。

综上所述拼接特点,基本上我们已经可以知道所有的模式了。

5.hidden-source-map：生成了注释文件 但是代码中并没有用注释的方式引入文件 我们是看不到效果的

6.nosource-source-map 保护源代码 不允许查看

Webpack 自动刷新问题

虽然有webpack-dev-server能给我们解决大部分问题,但是也有的问题显得比较鸡肋,比如输入文本字体样式，每次编辑完成之后刷页

面字体消失 还要重新输入，Webpack提供了一种不刷新的前提下，模块也可以及时更新的方法Webpack HMR。

Webpack HMR体验：模块热替换 应用运行过程中实时替换某个模块 应用运行状态不受影响。

webpack HMR已经集成到了webpack-dev-server中 只需要加上 webpack-dev-server --hot,也可以通过配置文件去开启由于JS无法像

CSS那样有条理的覆盖,所以JS与图片等无规律的热更新需要手动配置，webpack没有一个通用的状态,除非用到框架，因为框架本身

是一个模板，完整代码如下：