Parcel 教程
webpack 痛点
是不是觉得 webpack 配置过程非常痛苦？
我是说，我们开发一个项目，更应该关心项目本身，而不是项目开发环境的搭建、配置、维护 - webpack 虽妙（万物皆可模块化），但配置繁多，常常让人抓耳挠腮。
有痛苦的地方，就会产生新的解决方案。然后我们就有了各种基于 webpack 的零配置方案，比如 create-react-app，又或 vue-cli。相比 webpack，它们给我们的体验简直是如沐春风。
那么，同属零配置阵营的 Parcel 又如何？
Parcel 初体验
假设我要在 parcel-react 目录下新建一个 React 单页面应用。
先来初始化目录：
$ mkdir parcel-react
$ cd parcel-react
$ npm init -y
初始化完成后，第一个映入我们脑海的，当然是一个 html 文件。我们需要一个 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Parcel</title>
</head>
<body></body>
</html>
然后，我们还需要一个入口文件 index.js。我们将它加入 index.html 中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Parcel</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
接下来安装 react 及 react-dom - 注意，Parcel 是零配置，不是零安装，所以该装的依赖我们还是要装的：
$ npm install react react-dom
安装完成后在 index.js 中添加代码：
import React from 'react'
import { render } from 'react-dom'
render(<div>hello react</div>, document.body)
之后再安装 Parcel：
$ npm install parcel-bundler -D
然后执行 npx parcel index.html 来启动开发服务器：
$ npx parcel index.html
Server running at http://localhost:50909 - configured port 1234 could not be used.
✨ Built in 3.13s.
接着在浏览器中打开该网址 - 一切顺利，我们看到文字了。
是的，在 Parcel 下，我们不需要像 webpack 那样安装 babel-loader、配置 .babelrc 才能编译 JSX 语法。
那么 CSS 又如何？我们知道 webpack 下可以通过 css-loader 与 style-loader 加载 CSS 的。
我们来试试。
在项目下添加 index.css：
.container {
color: blue;
}
然后调整 index.js 代码：
import React from 'react'
import { render } from 'react-dom'
import './index.css'
render(<div className="container">hello react</div>, document.body)
保存，页面自动刷新，文字已经变成蓝色。
那图片呢？和 CSS 一样，我们只管 import/require，不需要额外任何的配置。
构建
至于最后的构建，也不过就一行命令：
$ npx parcel build index.html
Parcel 打包出了 JavaScript、CSS、图片，当然，还有我们的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Parcel</title>
<link rel="stylesheet" href="/parcel-react.4bf54ac4.css" />
</head>
<body>
<script src="/parcel-react.e00c84ee.js"></script>
</body>
</html>
与前面的 index.html 做个比较：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Parcel</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
Parcel 自动插入构建后的 CSS、JavaScript，这一切都不需要我们配置。
孰优孰劣
与 webpack 对比，显然 Parcel 的体验要远胜 webpack。
实际上，webpack 自 4.0 起，也大量引入默认配置项，减少用户配置工作，不妨认为，Parcel 是 webpack 的未来方向。
但 webpack 的生态毕竟要更丰富，就我个人在实际项目中的使用情况，还有些 webpack 插件（配置）能做而 Parcel 零配置做不到的事情。
