以前写 demo 的时候，使用 webpack 做为打包工具，期间需要配置 vue、react、添加 devServer、配置多入口等等，总之很麻烦，时不时给你个小“惊喜”！
其实，我只是想写个 Demo，练个手，看看效果，尤其是写文章的时候，总是会写一些 demo 来验证某个观点。webpack 让我浪费了很多时间搞那些配置。
最近发现了一个零配置的打包工具，使用后，感觉特别好。
它就是 parcel。
写一个 demo
先来创建一个项目 vue3，然后安装 parcel-hundler：
# 创建目录 vue3，我们后续关于所有的 demo 都放到这里
mkdir vue3
cd vue3
# 初始化项目
yarn init -y
# 安装 parcel
yarn add --dev parcel@next
然后创建一个 html 文件和一个 js 文件，目录结果如下：
src
1-basic-useage.js
index.html
index.css
package.json
index.html 文件中引用了一个 css 文件和一个 js 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3编程思想、源码解读</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>和素燕一起学习 Vue3 编程思想，关注公众号素燕</h1>
<div id="app"></div>
<script src="./src/1-basic-useage.js"></script>
</body>
</html>
在 package.json 中添加启动脚本：
"scripts": {
"dev": "parcel index.html --open",
"build": "parcel build index.html"
},
大功告成，然后在 vue3 这个目录下执行 npm run dev：
这时会自动打开 index.html 这个文件：
在整个过程中，我并没有配置一行代码，项目就跑起来了，而且支持热重载，代码修给后浏览器自动刷新。
大家加油！
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端
扫一扫
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
