HMR 热替换功能
自动安装依赖
main.js import $ from ‘jquery’ //直接引入，保存后自动安装 $(document.body).append(‘
Hello Parcel
‘)

零配置前端应用打包器,官方建议将html文件作为打包入口
安装：yarn add parcel-bundler —dev
打包：yarn parcel src/index.html 同时会自动开启内部服务器，监听改变
# index.html 入口文件 <!DOCTYPE html>
# main.js import foo from ‘./foo’; foo.bar()
# foo.js export default { bar:()=>{ console.log(“bar”); } }

HMR 热替换功能

当前模块，或者当前模块所依赖模块更新后，回调会自动执行
# main.js … if(module.hot){ module.hot.accept(()=>{ // 接收一个参数热替换的回调函数 console.log(‘hmr’); }) }

自动安装依赖

main.js import $ from ‘jquery’ //直接引入，保存后自动安装 $(document.body).append(‘

Hello Parcel

‘)

非js类型文件

添加一个style.css的样式文件，然后导入样式文件
添加一个.png图片，然后导入
# main.js import ‘./style.css’ import logo from ‘./mc.png’ $(document.body).append(<img src="${logo}" />)

支持动态导入

# main.js // import $ from ‘jquery’ import(‘jquery’).then($=>{ $(document.body).append(‘<h1>Hello Parcel</h1>’) })

生产模式打包

yarn parcel build src/index.html
相同体量的打包，parcel会比webpack快很多，parcel内部是多进程同时工作，充分发挥了多核cpu性能，webpack可以使用happypack插件来实现这一点
Parcel发布于2017年，当时Webpack使用上过于繁琐，完全零配置，构建速度快
vs.Webpack

Webpack生态更好，扩展更丰富
Webpack越来越好用