webpack启动服务器和处理sourcemap的操作方法
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">脚手架原理之webpack启动服务器和处理sourcemap</a></li><ul class="second_class_ul"><li><a href="#_lab2_0_0">Source Map 简介</a></li><li><a href="#_lab2_0_1">启动服务环境</a></li><li><a href="#_lab2_0_2">处理sourcemap</a></li></ul><li><a href="#_label1">Webpack5 SourceMap</a></li><ul class="second_class_ul"><li><a href="#_lab2_1_3">一、SourceMap有什么用</a></li><li><a href="#_lab2_1_4">二、怎么使用SourceMap</a></li><li><a href="#_lab2_1_5">三、需要注意的点</a></li></ul></ul></div><p class="maodian"><a name="_label0"></a></p><h2>脚手架原理之webpack启动服务器和处理sourcemap</h2><p class="maodian"><a name="_lab2_0_0"></a></p><h3>Source Map 简介</h3>
<p>Source Map（源代码地图）就是解决此类问题最好的办法，从它的名字就能够看出它的作用：映射转换后的代码与源代码之间的关系。一段转换后的代码，通过转换过程中生成的 Source Map 文件就可以逆向解析得到对应的源代码。</p>
<p class="maodian"><a name="_lab2_0_1"></a></p><h3>启动服务环境</h3>
<p>目前我们的webpack是没有服务环境的，那么如何启动一个web服务器呢？可以通过webpack-dev-server模块，下载使用即可。</p>
<div class="jb51code"><pre class="brush:bash;">npm install webpack-dev-server</pre></div>
<p>安装好后，再package.json中配置scripts脚本，<code>"serve": "webpack-dev-server"</code>，然后运行serve脚本。这样就会启动一个http://localhost:8080的服务。</p>
<p>当开启了web服务后，咱们的/dist文件可以不用存在了，服务会把dist的资源打入到内存中，这样可以大大加快编译的速度，所以/dist文件夹可以删除掉了，不影响服务的启动和访问。</p>
<p class="maodian"><a name="_lab2_0_2"></a></p><h3>处理sourcemap</h3>
<p>socurcemap启动映射文件的作用，可以通过浏览器查找到原始的文件，这样对于调试是非常有帮助的，配置如下：</p>
<div class="jb51code"><pre class="brush:plain;">module.exports = {
devtool: 'inline-source-map'
}</pre></div>
<p>补充：</p>
<p class="maodian"><a name="_label1"></a></p><h2>Webpack5 SourceMap</h2>
<p><code>提示：以下是本篇文章正文内容，下面案例可供参考</code></p>
<p class="maodian"><a name="_lab2_1_3"></a></p><h3>一、SourceMap有什么用</h3>
<p>为什么需要SourceMap<br />开发时我们运行的代码是经过 Webpack 编译压缩合并之后的，这样的目的是以提高应用程序的性能，但是这种优化也给调试问题带来了困难，因为压缩后的代码难以追踪和调试。这时候，SourceMap技术就能派上用场了。<br />SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。<br />它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。</p>
<p>可以提升开发体验 我们需要更加准确的错误提示，来帮助我们更好的开发代码</p>
<p class="maodian"><a name="_lab2_1_4"></a></p><h3>二、怎么使用SourceMap</h3>
<p>通过查看<a href="https://webpack.docschina.org/configuration/devtool/" rel="external nofollow"target="_blank">Webpack DevTool 文档</a>可知，SourceMap 的值有很多种情况，但Webpack5甚至更早的版本已经为我们内置了SourceMap，所以实际开发时我们只需要关注两种情况即可：</p>
<ul><li>在开发模式下使用：<code>cheap-module-source-map</code></li><li>优点：打包编译速度快，只包含行映射</li><li>缺点：没有列映射</li></ul>
<div class="jb51code"><pre class="brush:js;">module.exports = {
// 其他省略
mode: "development",
devtool: "cheap-module-source-map",
};</pre></div>
<p>在生产模式下使用：<code>source-map</code></p>
<ul><li>优点：包含行/列映射</li><li>缺点：打包编译速度更慢</li></ul>
<div class="jb51code"><pre class="brush:js;">module.exports = {
// 其他省略
mode: "production",
devtool: "source-map",
};</pre></div>
<p class="maodian"><a name="_lab2_1_5"></a></p><h3>三、需要注意的点</h3>
<p>生产环境我们一般不会开启sourceMap功能，主要原因如下：</p>
<p>1，通过bundle和sourcemap文件，可以反编译出源码，也就是说，线上产物有sourcemap文件的话，就意味着有暴露源码的风险。<br />2，我们可以观察到，sourcemap文件的体积相对比较巨大，这和我们生产环境的追求不同（生产环境追求更小更轻的bundle.）</p>
<p>所以有如下总结：Webpack 5中，是否需要开启<code>source-map</code>取决于你的具体需求和项目情况。以下是一些考虑因素：</p>
<ul><li>调试能力：如果你需要在生产环境中进行调试，查找问题或者进行性能优化，开启<code>source-map</code>可以提供更好的源代码映射，方便你定位和排查问题。</li><li>构建速度和输出文件大小：生成<code>source-map</code>会增加构建时间和打包后的文件大小。在生产模式下，你可能更关注性能和用户体验，因此可以选择关闭<code>source-map</code>以减小输出文件大小并提高构建速度。</li><li>安全性考虑：在某些情况下，你可能不希望将源代码暴露给终端用户。生成<code>source-map</code>可能会泄露你的源代码逻辑，因此需要权衡安全性和调试需求。</li></ul>
<p>总结来说，开启<code>source-map</code>在生产模式下不是必须的，但根据具体需求和项目特点，你可以根据以上因素进行判断和决策。</p>
<p>到此这篇关于webpack启动服务器和处理sourcemap的操作方法的文章就介绍到这了,更多相关webpack启动服务器内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
頁:
[1]