以一个新手第一次用webpack打包项目的视角带你学习webpack
前置说明
- 项目框架：AngularJs，Vue，React混合框架
- 项目架构：以AngularJs为主框架，Vue，React作为内部组件
- 项目背景：公司内部产品，用于工业互联网边缘设备的管理
- 注意事项：本篇文章只会借助这个项目进行分析讲解，不会具体展示项目内容
- 默认你已经具备了Vue项目开发经验，否则请学习Vue相关项目后再来看
分析
- 要使用打包工具，应该先分析项目结构，功能，对需求进行总结
- 说明：项目内存在三个框架Vue，React，Angularjs，我们先以Vue框架为例来讲解
- 创建：经典的Vue项目可以通过Vue-cli快速生成。
- 分析：由于国内使用AngularJs并不多，此处以Vue为主来讲解打包过程，注意只带你从全局来看，而不是详细到每一步怎么做。
Vue项目目录分析
Vue项目分析
- 我们以src目录来进行讲解webpack
- 首先分析有哪些格式的文件，主要是vue，js，html这三类
- 其次分析项目开发流程，以.vue文件来组织代码，借助vue框架本身的能力，实现了数据驱动视图的开发流程
- 最后分析项目构建流程，将所有格式的文件转换为浏览器可识别的三种格式，同时对语法进行兼容性处理，对最终的结果根据需要进行拼接，拆分，压缩，混淆等操作均可。
webpack的使用
- 我们都知道vue文件中分为三部分，template为html， script为js，style为css，对于浏览器可识别的三种格式
- 借助webpack的loader来转换，此处使用vue-loader。如果你有其他格式的文件，可以在npm官网搜索xxx-loader
- 除了代码文件外，也会有资源文件（静态文件），比如视频，音频，字体，图标，图片，markdown等等，对于这些非代码文件，一般是通过链接的方式去查看的，所以不需要我们特殊处理。
- 为了提升这些资源的访问速度，一般需要去通过压缩，预加载，缓存等方式来加速，这些行为也可以借助webpack来实现。
总结
- 对于代码文件，借助webpack的loader来处理转换，兼容等问题
- 对于资源文件，借助webpack的plugin来扩展其能力，比如创建html，移动文件等
- 对于访问速度，通过webpack配置项来开启缓存，拆分，压缩等行为。
实践
- 以公司产品AngularJs，React，Vue混合框架打包为例，同时讲解常见的构建考虑事项
- 第一步，实现对各框架DSL（领域特定语言）的处理转换，比如Vue的.vue，React的.jsx文件，借助vue-loader，angular-loader转为浏览器可识别文件，借助babel-loader实现兼容性处理。
- 第二步，实现对转换后的文件拼接为一个整体，即打包为一个bundle，配置entry为一个入口，默认webpack就是构建为一个bundle
- 第三步，如果项目比较大，第三方包比较多，这个时候可以借助splitchunk来拆分，或者通过externals来将其外置，减小bundle的体积，
- 第四步，对于打包好的js文件和css文件肯定是要引入html使用的，如果项目没有提供html文件，可借助html-webpack-plugin来自动生成，同时自动将打包后的js和css引入。
- 第五步，将所有构建后的可识别的文件放到服务器就可以访问了
思考
- 为什么项目可以混合框架来开发
- 因为不管是什么框架，都是语言层面的，比如Vue，React，本身提供了一些语法规范，遵守语法规范书写，框架就可以将编写的代码转换为js，html，css。
- 而webpack借助loader也可以实现代码的转译。所以我们编写vue文件不一定需要vue框架，可以使用loader来编译，但框架除了提供编译功能外，更重要是框架的核心特性，比如数据响应式。
- 项目主框架是AngulaJs，那么要使用Vue组件，有两步，第一步将Vue编译为js，第二步将其转换为符合Angularjs组件的写法。针对这些操作，有一个包ngVue去帮你完成。
- 可以从哪些方面来优化
- 谈到优化一般就是两点，加快构建速度，访问速度。
- 构建速度指，对文件的转译，兼容性处理，拼接，创建，压缩等。我们在处理文件的时候执行的步骤越多，速度越慢，因此开发环境下，一般构建时不进行压缩，混淆等操作。
- 访问速度指，浏览器加载文件的时间，有一个指标叫首屏渲染时长，为了提升用户体验，我们在页面第一次加载时，要减小文件的体积，对资源预加载，对文件进行缓存。
- 但是很明显构建速度和访问速度其实是互相影响的，比如文件拆分为小块去加载可以利用http2的并行特性提升速度，但是拆分构建结果会减慢构建速度，这个度的把握需要靠经验去控制，一般我们还是以用户体验为主。
- 什么时候要想到webpack
- 除了编码之外，任何想要实现的功能都可以考虑webpack。
- 想要了解日常的用法案例，可以参考官网的指南一章
