打包工具之parcel打包

前端工程化越来越普及，最热的打包工具必须是webpack。在webpack4.0以前，webpack打包的配置文件是极其繁琐的。而parcel宣称0配置、快速的特性，也让它有一席之地。今天，我们聊聊parcel的适用场景和那些踩过的坑。
1 项目目标题录结构
相信第一眼看到parcel的项目目录，大部分的人都会产生这样的疑问，这是现代化前端开发模式吗，确定没有回jsp那个时代。对的，parcel它就是一款无需任何配置就行进行多页面打包的工具，以至于它的目录层级看起来是那么的松散。每一个html文件就是parcel的入口，所以将html文件放在根目录下就是parcel最好的选择，而不是像webpack一样将每一个模块放在一个目录中进行管理。本人在项目后台同事建议下进行模块化目录优化（将同一模块的文件放到这个目录下，形如webpack模块文件的方式），打包之后发现打包的目录会配置*/的目录，将html文件直接在模块目录下。而不是全部放在打包文件下，这个对后期放到服务器下的代码有困难，请求的时候必须要加一个目录才能访问。所以，建议个人一定吧html单独放在根目录下，对于css文件和JS文件可以放在src目录下各自的目录中。
2 组件化
parcel的组件化和webpack并无二致，也可以将项目中一些公用的模块抽离处理进行组件化开发，如果用的vue进行项目开发的，直接在通过.vue文件进行封装即可。不过需要额外注意的是，在页面引入组件的时候，请一定写成双标签，形如：，而不要写成单标签。否则，parcel打包的时候会自动忽略单标签的内容。
3 样式书写位置
请一定一定不要在html中写style属性，进行属性描述。因为有可能会在打测试环境包的时候，报css loader文件，导致打包不成功。这个问题不是必现，至今，我也没有找到啥原因但是出现了一定会让你头疼。尤其还是你不知道原因又着急的情况下，别问我咋知道的，都是辛酸泪