Pro Yearly is on sale from $80 to $50! »

webpack 簡介

webpack 簡介

about webpack module bundler

9b2c27c2123feb9b02865c44b86456d0?s=128

Patrick Wang

October 24, 2014
Tweet

Transcript

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

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

  3. 前端模組打包⼯工具

  4. 跟 Bower 有什麼不同?

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

    的 RubyGems, .NET 的 NuGet
  6. RequireJS Browserify 呢?

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

  8. 有點像是 Rails 的 Sprocket //= require jquery //= require utils

    //= require_tree . 打成⼀一包 application.js
  9. ⼜又像 CSS 的 @import @import “base”; @import “header”; @import “content”;

    @import “footer”; 透過 Sass 也可以打成⼀一包
  10. 想解決的問題是類似的 ⽐比較晚點再說

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

  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
  13. • 模組規範 • CommonJS • AMD • CMD, UMD… •

    ES6
  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 的樣式
  15. ⽤用來解決... • 解決載⼊入相依性問題
 
 
 
 
 • 打包 Bundle

    • Cache buster: [name]-[hash].js • ⾮非同步載⼊入 <script src=“jquery.dataTable.js”></script> <!— jQuery 呢?! —> <script src=“jquery.min.js”></script> require([‘jquery’, ‘datatables’], function ($) {
 $(“.data-table”).dataTable();
 }); 確保都載⼊入再執⾏行內容!
  16. • RequireJS • AMD • Browserify • CommonJS 不是照規範開發的...要⾃自⼰己加⼯工(shim)才能⽤用 http://webpack.github.io/docs/comparison.html

  17. • Webpack • CommonJS (require.ensure([], cb)), AMD (require([],cb)) 都⽀支援 •

    可以嵌⼊入 CSS, SCSS, CoffeeScript, 甚⾄至是圖⽚片等各種靜態⽂文件 (眾多 的 Loader) • ⽀支援引⼊入 npm, bower, component 的模組 • 程式碼分割(Code Splitting) • 切成⼩小塊(Chunks)、多個 .js ,可⽤用於多處 • ⾮非同步載⼊入... 只在必要的時候才載⼊入 • 多⼊入⼝口 • ⾃自有 dev-server
  18. http://blog.b3inside.com/photography/2011-austria-salzburg/

  19. • 搭配 React • http://gaearon.github.io/react-hot-loader/ • How instagram.com works? •

    https://www.youtube.com/watch? v=VkTCL6Nqm6Y
  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