繼 Webpack 之後，又一款打包工具 Parcel 橫空出世，Parcel 是快速、零配置的 Web 應用程序打包器；
1、 Parcel 使用工作進程啓用多核編譯，並具有文件系統緩存，即使在重新啓動後也可快速重新構建。
2 、Parcel 支持JS，CSS，HTML，文件資源等等 - 不需要安裝任何插件。
3、在需要時，代碼使用 Babel，PostCSS 和 PostHTML 自動轉換 - 即使是 node_modules。
4、Parcel 使用動態 import() 語法拆分您的輸出包，所以只加載初始加載時所需的內容。
5、當你在開發過程中進行更改時，Parcel 會自動更新瀏覽器中的模塊，不需要進行任何配置。
6、遇到錯誤時，Parcel 會以語法高亮的形式打印的代碼幀，以幫助你查明問題。
關於Parcel 的優缺點，以及Parcel和Webpack的比較，Parcel Vs Webpack講解的比較詳細，本文主要是Parcel實踐的實踐。
Parcel文檔： http://www.css88.com/doc/parcel/getting_started.html
Parcel Github： https://github.com/parcel-bundler/parcel
一、Parcel安裝
Parcel是一個Web應用程序打包器(bundler) ，與以往的開發人員使用的打包器有所不同。它利用多核處理提供極快的性能，並且你不需要進行任何配置。首先使用Yarn或npm安裝 Parcel：
Yarn:
yarn global add parcel-bundlernpm:
npm install -g parcel-bundler 安裝完之後可以通過parcel -V查看Parcel的版本：
Parcel 內置了一個開發服務器，這會在你更改文件時自動重建你的應用程序，並支持模塊熱替換 ，以便你快速開發。你只需指定入口文件即可：
parcel index.html -p 8089
然後在瀏覽器中打開 http://localhost:8089/ 可以查看index.html頁面，parcel支持熱更新，會監聽html、css、js的改變並即時渲染。
二、模塊化項目實踐
示例的目錄結構：
模塊化項目首先需要創建一個package.json文件，使用npm init -y或者yarn init -y創建一個默認的package.json文件，修改parcel的運行命令爲npm run dev或者yarn run dev。
{
"name": "parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel index.html -p 8089"
},
"keywords": [],
"author": "",
"license": "ISC"
}雖然全局安裝了parcel，在項目中還是推薦安裝依賴：
npm install parcel-bundler -SBabel 默認只轉換新的 JavaScript 語法，而不轉換新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign）都不會轉譯。如果想使用這些新的對象和方法，必須使用 babel-polyfill，爲當前環境提供一個墊片。因爲項目中用到了新的對象和方法，所以應當安裝babel-polyfill插件。
npm install babel-polyfill -S然後，創建一個 .babelrc 文件：
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": ["transform-runtime"]
}在安裝的parcel依賴中自帶了postcss的所有插件，所以項目中只需要創建一個 .postcssrc 文件：
{
"plugins": {
"autoprefixer" : true
}
}js和css都已經處理完成，安裝完所需的依賴後package.json：
{
"name": "parcel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel index.html -p 8089"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-plugin-istanbul": "^4.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-2": "^6.24.1"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"parcel-bundler": "^1.6.2"
}
}index.html
<!DOCTYPE html>
<html>
<link>
<title>parcel使用</title>
<link rel="stylesheet" href="./static/css/style.css"/>
</head>
<body>
<header>
<img class="logo"
src="./static/images/logo.svg"
alt="Parcel">
<h2>快速，零配置的 Web 應用程序打包器</h2>
<div class="parcel">
<img src="./static/images/parcel-back.png"
srcset="./static/images/parcel-back.png 2x, ./static/images/parcel-back.png 3x">
<img src="./static/images/parcel-front.png"
srcset="./static/images/parcel-front.png 2x, ./static/images/parcel-front.png 3x"> </div>
<div class="wrapper">
<div class="item1">parcel</div>
<div class="item2">parcel</div>
<div class="item3">parcel</div>
<div class="item4">parcel</div>
<div class="item5">parcel</div>
</div>
</header>
<script src="./static/js/index.js"/></script>
</body>
</html> 運行npm run dev 在瀏覽器中打開http://localhost:8089/如圖所示：
運行後生產.cache和dist目錄，.cache是緩存文件，dist是打包文件；dist目錄如下：
運行後修改html、css、js頁面都會自動更新。Parcel構建速度比webpack快，但 Parcel輸出文件比webpack大，Parcel構建用於運行在瀏覽器中的網頁，比較適合小型的項目，使用中還是存在不少的坑。