webpack压缩的原理 webpack4压缩js

gulp和webpack学一个就够了吗

是的，你可以选择学习一个，因为gulp和webpack都是用于前端资源处理的工具，它们的功能非常相似。

gulp是一个基于node.js的流处理工具，用于快速构建项目。它使用简单易懂的API，可以方便地自动化任务，比如压缩、合并、编译SASS等。此外，gulp还支持插件，可以方便地扩展其功能。

webpack则是一个模块打包工具，用于将前端资源打包成浏览器可以识别的格式。它支持各种文件类型，包括JavaScript、CSS、图片等，并且可以自动化处理这些资源。此外，webpack还支持各种插件，可以方便地扩展其功能。

总的来说，两者都可以完成前端资源的处理任务，但是它们的使用方式和特点略有不同。你可以根据自己的需求和喜好来选择一个学习即可。

gulp和webpack虽然都是基于nodejs，但是两者各有优缺点，gulp只能做到压缩文件，而webpack是压缩，分离，把非标准格式转成标准的，可以被浏览器识别的格式。

vue组件封装几种方法

在Vue中，组件的封装有多种方法，常用的有以下几种：
1. 全局组件：在Vue的根实例中注册全局组件，可以在任何地方使用。在组件中定义template、data、methods等选项，并使用Vue.component()方法进行注册。
2. 局部组件：在一个组件的选项中定义另一个组件作为它的子组件，只能在父组件中使用。一般通过components选项或者在template中使用<component>标签来引入。
3. 插件：可以通过Vue.use()方法将一个组件作为插件注册到Vue中，使得该组件的功能可以在所有Vue实例中使用。
4. 混入：可以通过Vue.mixin()方法将一个混入对象合并到组件中，从而可以在多个组件中共享相同的选项。混入对象可以包含data、methods、生命周期钩子等选项。
5. 自定义指令：通过Vue.directive()方法自定义指令，可以在模板中使用v-指令对DOM进行操作。指令对象中可以定义bind、update、unbind等钩子函数来处理DOM的操作。
这些方法可以根据具体的需求和场景来选择合适的封装方式。

使用Vue-cli自带编译为库的功能进行封装，具体步骤如下：

编写好源码。

执行命令：vue-cli-service build --target lib --name index --dest dist ./src/lib/index.ts--name，其中，--name参数设置库的名字，--dest参数设置生成文件的保存目录，./src/lib/index.ts表示入口文件。

这个命令在dist目录中生成了CJS和UMD的文件，同时CSS也被处理出称为一个单独的文件。

使用webpack进行封装。

使用webpack进行封装的方法较多，如分割代码、代码压缩、加载器、插件、动态导入等等，具体方法可咨询专业人士。