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就够了。

 

上一篇:Gulp的代理转发插件


下一篇:Typescript结合gulp开发