webpack

首先说明在接触webPack之前,我绝对是一个requirejs的粉,本着接触新技术的态度,在项目中用了webPack。

首先列举一下比较官方的总结:

特点

  • 模块打包(基本功能)
  • 支持CommonJs和AMD(Bowserify,RequireJS,是个亮点) 
    • 可以混合使用, commonjs 与amd模块,方案上webpack作用原理更类似于Bowserify,只是增加了异步加载的功能。
  • source-map支持(debug调试必须的,requreJs也有)
  • 支持模块按需加载(requirejs)
  • 任何用到的资源都可作为模块被require(js/css/html/markdown/图片/字体/html…)||(requrieJs)
  • 预编译(stylus/sass/less/coffeescript/jsx/图片转base64…)||(requrieJs 也提供sass,less,coffe,jsx的预编译的插件)
  • 优化: 压缩/文件缓存(自带根据hash值做文件缓存相比requirejs是个小亮点,requirejs是配置公用参数导致所有文件都会被更新)
  • 多点页面切分公共代码(官方亮点,通过CommonsChunkPlugin自动提取多个入口JS的公共部分生成common.js)
  • 开发模式下支持代码的热替换(requireJs不需要,Bowserify与webPack在开发模式下服务器编译生成bundle.js,通过gulp的watch也可以但是效率太低)

  • 单独打包css,合并入js。

    • 支持@import ” “
    • 相比于requirejs,在模块中加载css时,可以配置将css从js中分离出,而不是打进js(个人感觉比较奇怪,不想打进js,为什么要在js中require,破坏了依赖关系)
    • 可以选择作为link还是style dom插入()
    • 可以通过调用,移除css(对于开发来说是个亮点,改变了设计组件的方法,实现了将css ,template, js 打成一个包,一起调用一起注销。)
  • weboack的打包方式完全走本地

第二部分:个人总结:

       

你可能感兴趣的:(Web)