本文目录一览：
- 1、如何使用Rollup打包JavaScript
- 2、如何使用Rollup打包样式文件并添加LiveReload
- 3、一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
如何使用Rollup打包JavaScript
export default {
entry: 'src/scripts/main.js',
dest: 'build/js/main.min.js',
format: 'iife',
sourceMap: 'inline',
};
新建rollup.config.js，然后填入上面的内容
entry — 希望Rollup处理的文件路径。大多数应用中，它将是入口文件，初始化所有东西并启动应用。
dest — 编译完的文件需要被存放的路径。
format — Rollup支持多种输出格式。因为我们是要在浏览器中使用，需要使用立即执行函数表达式(IIFE)[注1]
sourceMap — 调试时sourcemap是非常有用的。这个配置项会在生成文件中添加一个sourcemap，让开发更方便。
更多请查看此文：
作者讲得非常的棒！
如何使用Rollup打包样式文件并添加LiveReload
我们会在上周的项目基础上继续进行，因此如果你还没有看上一节，推荐你先看一下。
注: 如果你没有项目的副本，你可以通过这条命令克隆在第一部分结束这个状态下的项目：git clone -b part-2-starter --single-branch
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: © w3cplus.com
一篇文章说清 webpack、vite、vue-cli、create-vue 的区别
先看这个表格：
是不是有了一个整体的感觉？我们再来详细的看一下。
官网：
vue-cli 是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。
vue-cli 用于创建 vue2 的项目；
@vue/cli 用于创建 vue3 的项目，当然也支持 vue2。
使用起来还是比较繁琐的，首先要安装脚手架，然后使用 vue create hello-world 创建项目，具体的就不介绍了。
官网：
create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
然后我们可以选择需要的各种插件：
官网：
使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。
目前支持的模板预设如下：
官网：
rollup 是一种打包工具，特点就是，打的包非常精简，体积小。
官网是英文的，中文资料也比较少，不过好在常规用法可以参考 vite的官网。
尤雨溪在知乎的一次回答（ ）里提到：
webpack 是一个全能选手，啥都能干，只是有点复杂，对新手不太友好。
Rollup 是后起之秀，打包更简洁。
vite 把 rollup 变成了“开袋即食”，便于新手入门。
create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。
所以，想创建一个 vue3 的项目，首选 create-vue，非常方便快捷，建立的项目也可以统一风格。