Parcel
零配置前端应用打包器,官方建议将html文件作为打包入口
安装：yarn add parcel-bundler --dev
打包：yarn parcel src/index.html 同时会自动开启内部服务器，监听改变
# index.html 入口文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Tutorials</title>
</head>
<body>
<script src="main.js"></script>
</body>
</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('<h1>Hello Parcel</h1>')
非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越来越好用
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。