webpack以及gulp介绍

webpack

webpack3和4的区别：

4是零配置的；
零配置会将你项目src目录下的index.js打包到dist文件夹的main.js当中。

webpack的作用：

1. 优化：工程化。Vue，React cli
2. 打包：将多个文件进行压缩，打包成一个文件。
3. 转换：es6，ts，jsx，less，sass。

使用webpack：

安装

$npm i webpack -D
$npm i webpack -cli -D

就可以在命令行使用webpack命令；

webpack命令：
–mode 指定打包模式：开发development。生产production。默认是生产环境。
想将多个文件打包成一个文件：
webpack src/one.js src/two.js后面可选加上打包成什么模式
–output 指定导出文件地址
webpack src/one.js src/two.js --mode development --output hah.js

入口文件可以写成字符串，数组或者对象。

写成数组就打包到一起，写成对象会分片打包。

webpack-plugin:
html-webpack-plugin

webpack-dev-server

webpack-merge

rimraf

---

其他的打包工具：rollup,gulp,parcel

gulp：

gulp熟记五个命令：

• gulp.task - - 定义任务
• gulp.run - - 执行任务
• gulp.watch - - 监视任务
• gulp.src - - 设置根目录
• gulp.dest - - 设置生成文件的路径

再记一个pipe就够了。