安装

通过以下命令即可安装 parcel

1	npm install -g parcel-bundler

启动服务

选择一个目录，在这里新建一个 index.html

写好 html 之后，在当前目录下启动 parcel

1	parcel index.html -p 8080

就会在 8080 端口（默认是 1234）启动 http 服务

不需要任何配置，非常好用。而 webpack 需要的配置太多了不适合快速开发

parcel 还有更好用的一点——页面热更新！

但是要使用页面热更新，对 html 页面是有要求的

那就是 html 需要引入至少一个外联的 script 标签

外联的目标 script 可以是空的，但这个标签不能省略，否则不能热更新

好了，现在不论你修改的是 html，还是 html 外联的 css，都会在保存之后立刻重新编译然后渲染到页面上，不需要手动刷新页面了

刚才说到了编译——其实 parcel 是会自动帮你打包的

比如现在目录下只有

启动了 parcel 之后，parcel 会自动把你的 html 以及外联的所有文件都组织起来，自己编码后打包成一个 dist 文件夹

现在开发目录下就变成了 3 个文件加上 1 个文件夹了

所以建议开发目录中，最好把静态文件都放在同一个文件夹中，按惯例命名为 src

目录结构就变成这样

这样更有利于文件资源管理

parcel 之所以会产生 dist 文件夹，就是因为它自己把资源编码了

这时候你的路径就不是原本的路径了

比如你通过 js 动态插入一个 img 标签，这个 img 的 src 是不能正确命中资源的

这时候你需要通过 js 的 import 语句来解决这个问题

感谢阅读