前不久，我整理了文档给大家，是说的webpack 。今天介绍和它具有相同功能Parcel，但是不需要配置？不需要配置这也是它的标榜。
Parcel的好处是什么？
更快的构建速度 ：Parcel比Webpack 、Rollup 和Browserify更快；
这是基于Parcel的速度：
这是它的好处：
Parcel是如何运作的？
Parcel 将 资源 树转换成 文件束 树。许多其它的打包工具基本上是基于 JavaScript 资源，还有附加在其上的其它格式的资源。例如，在 JS 文件中内联成字符串。 Parcel 是对文件类型无感知的，它能按你所期待的方式那样与任意类型的资源工作，且毋须配置。Parcel 的打包流程共有三个步骤。
1、构建资源树
Parcel 接受单个入口资源作为输入，可以是任意类型：一个 JS 文件、HTML、CSS 和图片等等。有许多不同的资源类型在 Parcel 中被定义，它知道如何去处理特定的文件类型。资源会被解析，资源的依赖会被提取，资源会被转换成最终编译好的形态。此过程创建了一个资源树。
2、构建文件束树
一旦资源树被构建好，资源会被放置在文件束树中。首先一个入口资源会被创建成一个文件束，然后动态的 import() 会被创建成子文件束 ，这引发了代码的拆分。
当不同类型的文件资源被引入，兄弟文件束就会被创建。例如你在 JavaScript 中引入了 CSS 文件，那它会被放置在一个与 JavaScript 文件对应的兄弟文件束中。
如果资源被多于一个文件束引用，它会被提升到文件束树中最近的公共祖先中，这样该资源就不会被多次打包
3、打包
在文件束树被构建之后，每个文件束都会被 packager 写到一个特定文件类型的文件中。packagers 知道如何从每个资源中将代码合并起来，生成到最终被浏览器加载的文件中。
什么场景下使用呢？
注：webpack依然非常棒，有些场景下它仍然会更快一些
当然这也完全取决于你，但是我个人会在以下场景中使用不同的打包器：
- Parcel：小型到中型规模的项目
- Webpack：大型以及企业级规模的项目
- Rollup：用于NPM包
那么让我们使用吧
- 首先通过Yarn或者npm 安装Parcel：
yarn global add parcel-bundler
or
npm install -g parcel-bundler
- 在你正在使用的项目目录下创建一个package.json文件：
yarn init -y
or
npm init -y
- Parcel 可以使用任何类型的文件作为入口
但是最好还是使用 HTML 或 JavaScript 文件。如果在 HTML 中使用相对路径引入主要的 JavaScript 文件，Parcel 也将会对它进行处理将其替换为相对于输出文件的 URL 地址。
接下来，创建一个 index.html 和 index.js 文件。
<html>
<body>
<script src="./index.js"></script>
</body>
</html>
console.log("hello world");
Parcel 内置了一个当你改变文件时能够自动重新构建应用的开发服务器，而且为了实现快速开发，该开发服务器476支持热模块替换。只需要在入口文件指出：
parcel index.html
现在在浏览器中打开 http://localhost:1234/。你也可以使用 -p <port number> 选项覆盖默认的端口。 如果没有自己的服务器可使用开发服务器，或者你的应用程序完全由客户端呈现。如果有自己的服务器，你可以在watch 模式下运行 Parcel 。当文件改变它仍然会自动重新构建并支持热替换，但是不会启动 web 服务
parcel watch index.html
当你准备在生产模式下创建，build 模式会关闭监听并且只建立一次。请查阅 Production 查看更多细节。
HMR
又叫热模块更新。在运行时自动更新浏览器中的模块优化开发体验，无需刷新整个页面。这意味着在您代码小幅更改时可以保留应用程序的状态。Parcel 的 HMR 实现支持开箱即用的 JavaScript 和 CSS 资源。
HMR 构建在生产模式下时自动禁用。
有两种已知方法：module.hot.accept 和 module.hot.dispose。你可以调用module.hot.accept并赋予一个回调函数，该函数会在模块或其他依赖项被更新时执行。当该模块即将被替换时，module.hot.dispose回调函数会被调用。
if (module.hot) {
module.hot.dispose(function () {
// 模块即将被替换时
});
module.hot.accept(function () {
// 模块或其依赖项之一刚刚更新时
});
}
