Upgrade to Pro — share decks privately, control downloads, hide ads and more …

webpack 簡介

webpack 簡介

about webpack module bundler

Patrick Wang

October 24, 2014
Tweet

More Decks by Patrick Wang

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. 前端模組打包⼯工具

    View full-size slide

  4. 跟 Bower 有什麼不同?

    View full-size slide

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

    View full-size slide

  6. RequireJS
    Browserify
    呢?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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





    • 打包 Bundle
    • Cache buster: [name]-[hash].js
    • ⾮非同步載⼊入


    require([‘jquery’, ‘datatables’], function ($) {

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide