webpack 簡介

about webpack module bundler

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