1.优点: 不需要配置,装好即用 测试包括ES6/vue/sass 均可自动编译,浏览器热更新,简单易上手,快速
2.与webpack对比:https://juejin.cn/post/6844903542436839437 (拜读)
3.官网: http://www.css88.com/doc/parcel/
4.git: https://github.com/parcel-bundler/parcel?utm_source=gold_browser_extension
5.插件列表: https://github.com/parcel-bundler/parcel/issues/265
6.安装: npm install -g parcel-bundler
7.运行(watch): parcel index.html
Parcel 可以将任何类型的文件作为 入口点,运行后默认启动服务 http://localhost:1234/
8.修改端口命令:-p <port number>
9.打包生产环境: parcel build index.html
1) 此方法会重新构建所有文件
2) 实测发现css、html可以压缩,但js未混淆压缩(待查)
3)修改打包输出目录 `parcel build entry.js -d */*`
10.demo目录:
|-root
|-dist // 编译后自动生成
|-index.html
|-***.js
|-***.css
|-dev // 开发目录
|-index.js
|-index.css
|-index.html // 主页面 入口
创建package.json文件: npm init -y
11.已知注意事项:
1) sass 使用前需安装模块 `npm install node-sass` 安装新模块后需重新运行
2) js import方式引入css/scss 会以外联的形式打包到html header内
3) 打包后资源未混淆压缩
4) background:url("") 必须带引号 (待验证)
5) 同文件夹下引入路径 需加./
12.已知报错信息
1) `Error: Cannot find module parcel-bundler/src/packagers/JSPackager.js` 不影响正常功能 原因待查
2) 使用sass时 css undefined 可能是未安装sass模块