webpack 簡介

about webpack module bundler

Transcript

1. Webpack 前端模組打包⼯工具
   patw@gogolook developers meetup
   2014.10.24
   

   View Slide

2. 什麼是 webpack？
   http://webpack.github.io/
   

   View Slide

3. 前端模組打包⼯工具
   

   View Slide

4. 跟 Bower 有什麼不同？
   

   View Slide

5. Bower
   • 由 Twitter 推出
   • 模組套件版本相依管理安裝⼯工具
   • 類似 Ruby 的 RubyGems, .NET 的 NuGet
   

   View Slide

6. RequireJS
   Browserify
   呢？
   

   View Slide

7. 其實還有很多 LABjs,
   Sea.js, Duo...
   

   View Slide

8. 有點像是 Rails 的
   Sprocket
   //= require jquery
   //= require utils
   //= require_tree .
   打成⼀一包 application.js
   

   View Slide

9. ⼜又像 CSS 的 @import
   @import “base”;
   @import “header”;
   @import “content”;
   @import “footer”;
   透過 Sass 也可以打成⼀一包
   

   View Slide

10. 想解決的問題是類似的
    ⽐比較晚點再說
    

    View Slide

11. 不過
    不只是打成⼀一包⽽而已
    

    View Slide

12. Goal
    • Split the dependency tree into chunks loaded on demand
    • Keep initial loading time low
    • Every static asset should be able to be a module
    • Ability to integrate 3rd-party libraries as modules
    • Ability to customize nearly every part of the module bundler
    • Suited for big projects
    http://webpack.github.io/docs/what-is-webpack.html
    

    View Slide

13. • 模組規範
    • CommonJS
    • AMD
    • CMD, UMD…
    • ES6
    

    View Slide

14. ⽤用來解決...
    • 模組化
    // patw.js … 以 CommonJS ⽰示範
    require(‘patwWidget.css’);
    var patwWidget = {};
    patwWidget.init = function () {
    console.log(“init”);
    };
    module.exports = patwWidget;
    // 使⽤用定義好的元件
    var patw = require(‘./patw’);
    patw.init();
    // 印出 init
    // 並套⽤用了 pageWidget.css 的樣式
    

    View Slide

15. ⽤用來解決...
    • 解決載⼊入相依性問題

    

    

    

    

    • 打包 Bundle
    • Cache buster: [name]-[hash].js
    • ⾮非同步載⼊入
    
    
    require([‘jquery’, ‘datatables’], function ($) {

    $(“.data-table”).dataTable();

    });
    確保都載⼊入再執⾏行內容！
    

    View Slide

16. • RequireJS
    • AMD
    • Browserify
    • CommonJS
    不是照規範開發的...要⾃自⼰己加⼯工(shim)才能⽤用
    http://webpack.github.io/docs/comparison.html
    

    View Slide

17. • Webpack
    • CommonJS (require.ensure([], cb)), AMD (require([],cb)) 都⽀支援
    • 可以嵌⼊入 CSS, SCSS, CoffeeScript, 甚⾄至是圖⽚片等各種靜態⽂文件 (眾多
    的 Loader)
    • ⽀支援引⼊入 npm, bower, component 的模組
    • 程式碼分割（Code Splitting）
    • 切成⼩小塊（Chunks）、多個 .js ，可⽤用於多處
    • ⾮非同步載⼊入... 只在必要的時候才載⼊入
    • 多⼊入⼝口
    • ⾃自有 dev-server
    

    View Slide

18. http://blog.b3inside.com/photography/2011-austria-salzburg/
    

    View Slide

19. • 搭配 React
    • http://gaearon.github.io/react-hot-loader/
    • How instagram.com works?
    • https://www.youtube.com/watch?
    v=VkTCL6Nqm6Y
    

    View Slide

20. • https://github.com/petehunt/webpack-howto
    • https://medium.com/@tomchentw/why-webpack-is-
    awesome-9691044b6b8e
    • https://github.com/webpack/docs/wiki/api-in-
    modules
    • http://hanjianwei.com/2014/09/10/webpack-
    package-manager-for-web.html
    • http://cuttleblog.tumblr.com/post/63669845272/
    webpack
    

    View Slide