V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shuson
V2EX  ›  webpack

前端轮子们: gulp 和 webpack 是不是有功能上的 overlap

  •  
  •   shuson · 2015-10-22 12:16:55 +08:00 · 10124 次点击
    这是一个创建于 3313 天前的主题,其中的信息可能已经有所发展或是发生改变。

    为了跟上前端界按周更新技能的周期,看到很多 react 项目在使用 webpack ,我也手痒。于是乎试试。

    问题 1 : webpack 既然和 browserify 是一个类型的,当然,强大了许多,居然可以把 css 也当做了 compile to js 来使用。 gulp 也有很多插件完成 coffee script 或者 es6 到 js 的过程。为何这个轮子造出来了。难道是为了统一 AMD 和 commonjs 不同 module loading 问题?

    问题 2 : learning curve 有点陡啊,不像 gulp 一上午就知道怎么用了。 小项目使用是不是有点过?

    愚见,喷吧,反正也是学习。

    第 1 条附言  ·  2015-10-22 14:40:22 +08:00

    总结:
    gulp 和 webpack 的区别: 在 webpack 里,你只需要 require 就行了,依赖关系 webpack 帮你处理。而在 gulp 里,你还是需要把所有的 js 或者其他依赖文件用 gulp.src 弄起来。

    11 条回复    2015-10-26 10:48:27 +08:00
    foomorrow
        1
    foomorrow  
       2015-10-22 12:29:25 +08:00
    目前基本已经不用 gulp 了 webpack 搞定一切,包括但不限于 css 合并压缩、 assets rev
    shuson
        2
    shuson  
    OP
       2015-10-22 13:29:56 +08:00
    @foomorrow 看了半天官方文档,感觉还是啥都不会。有比较高效的教程么
    chairuosen
        3
    chairuosen  
       2015-10-22 13:36:41 +08:00
    用 gulp 主要是 usemin 那样来组织代码,还是老模式依赖关系在前端自己解决, gulp 只是给你文件压在一起, webpack 就完全是重新定义了组织代码的方式,这是颠覆的。
    我觉得学习曲线不陡啊,定义一下入口出口,各种特殊格式怎么 require 就完了。
    FuryBean
        4
    FuryBean  
       2015-10-22 13:49:37 +08:00
    @shuson 可以看这个 demo : https://github.com/ruanyf/webpack-demos

    再加几个常用的 loader 就可以了: file-loader 、 url-loader 、 html-loader 等。
    shuson
        5
    shuson  
    OP
       2015-10-22 14:02:33 +08:00
    @chairuosen 经你第一句话一说,我突然觉得入门了。
    看了一篇文章[Webpack Compared]( http://survivejs.com/webpack_react/webpack_compared/),有了点自己的理解。希望指正:
    Webpack + npm = maven ?
    chairuosen
        6
    chairuosen  
       2015-10-22 14:16:44 +08:00
    @shuson 没写过 java 不熟 Maven 。我觉得 webpack 有三个地方是最大的不同: 1 ,不用考虑资源位置, webpack 给你做了。 2 不用考虑资源加载方式,异步同步改一下写法就行, webpack 也给你做了。 3 ,不用考虑 common 资源的整理, webpack 有个 CommonsChunkPlugin 能做。
    你只要安心写代码就可以了。
    ChefIsAwesome
        7
    ChefIsAwesome  
       2015-10-22 14:18:46 +08:00
    https://github.com/petehunt/webpack-howto

    看这个。我看官方那文档也看不懂,看这个一下子就知道了。
    shuson
        8
    shuson  
    OP
       2015-10-22 14:27:49 +08:00
    @ChefIsAwesome 感谢
    看到这句话
    start with this as your webpack docs, then look at the official docs for clarification.

    顿时觉得 webpack 官方文档被打脸了
    Sivan
        9
    Sivan  
       2015-10-22 14:59:47 +08:00
    webpack 在很多地方是颠覆的,当然也可以和 gulp 硬扭在一起。不过目前感觉啃下 webpack 对将来开发环境迭代更省事。
    ZhaoMiing
        10
    ZhaoMiing  
       2015-10-25 23:55:09 +08:00
    我也是看了半天的官方文档完全不知所云,然后我就找到了这篇文章 https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460#.tymjh1fmh
    shuson
        11
    shuson  
    OP
       2015-10-26 10:48:27 +08:00
    @ZhaoMiing 不错,更清楚了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   982 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 81ms · UTC 20:30 · PVG 04:30 · LAX 12:30 · JFK 15:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.