webpack和gulp

在没有使用任何自动化工具之前,如果用sass写了css, 用coffee写了js, 那么我们必须手动用相应的compiler去编译各自的文件,然后各自minify(js,css文件压缩并合并)。这时如果又有两张新图片,那么又需要用自己的小工具手动去压缩图片。于是为了解决前端这种总需要做很多重复工作的弊端,提高工作效率,于是就有人弄出了自动化流程的grunt/gulp,这样当写完代码后想要发布一个production版本,用一句gulp build就可以

  1. rm 掉dist文件夹中以前的旧文件
  2. 自动把sass编译成css, coffee编译成js
  3. 压缩各自的文件,压缩图片,生成图片sprite
  4. 拷贝minified/uglified文件到dist文件夹(uglifyjs用来压缩js文件, minify压缩并合并js,css)

但是它没有解决的是js 模块化的问题,(js模块化发展历程:http://web.jobbole.com/83761/); 之前大家可以用require.js,sea.js来require依赖,后来就出现了webpack把所有文件(css, image, js)都看成是模块,都用js来生成依赖,最后生成一个bundle,所以webpack也叫做文件打包工具; 同时webpack为了解决可以require不同文件的需求引入了不同的loader, 比如面对sass文件有

  1. sass-loader,把sass转换成css
  2. css-loader让webpack能识别处理css
  3. style-loader把识别后的css插入到htmle的style中

类似的识别es6有babel-loader;

webpack实现了require everything, bundle everything;而且webpack还可以使用各种plugins,也可以实现文件的压缩合并等优化工作,再加上它本身优秀的解决模块依赖的能力,这样可以直接使用webpack来完成前端所有的自动化构建工作,perfect

 

posted @ 2018-01-22 15:57  pei~乐悠悠  阅读(133)  评论(0编辑  收藏  举报