<template><h1 id="前言" tabindex="-1"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h1>
<h2 id="为什么需要打包工具" tabindex="-1"><a class="header-anchor" href="#为什么需要打包工具" aria-hidden="true">#</a> 为什么需要打包工具？</h2>
<p>开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。</p>
<p>这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。</p>
<p>所以我们需要打包工具帮我们做完这些事。</p>
<p>除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。</p>
<h2 id="有哪些打包工具" tabindex="-1"><a class="header-anchor" href="#有哪些打包工具" aria-hidden="true">#</a> 有哪些打包工具？</h2>
<ul>
<li>Grunt</li>
<li>Gulp</li>
<li>Parcel</li>
<li>Webpack</li>
<li>Rollup</li>
<li>Vite</li>
<li>...</li>
</ul>
<p>目前市面上最流量的是 Webpack，所以我们主要以 Webpack 来介绍使用打包工具</p>
</template>
