浅谈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没有一个通用的状态,除非用到框架，因为框架本身

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

巴特西