Honey's Data Dinner#7 webpack 包達人(入門)
?
3 likes?593 views
Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具，但Webpack 並 不是一般的前端打包工具，透過模組系統將 CSS 、圖片與其他資源打包至 JS 中，更能預處理 less、sass、jsx 等語法。在日新月異的前端技術中，擁有好的工具和技術，才能獲得更好的作品和成就感，就讓我們一同來瞧瞧這包達人的厲害之處～
![Beehive Data Group
模組化
AMD 非同步載入
為瀏覽器環境設計的規範，定義了非同步載入模組。
require(['module', '../file'], function(module, file) { /*
code here */});
define('mymodule', ["dep1", "dep2"], function(d1, d2) {
return someExportedValue;
});
優點
● 符合網路非同步載入的需求
● 可多模組平行載入
缺點
● 較高的開發成本，撰寫比較多的程式碼
，比較難讀寫和維護
● 看起來像是某種取巧的解法實作](https://image.slidesharecdn.com/honeysdatadinner7webpackjeffy-160715084551/85/Honey-s-Data-Dinner-7-webpack-11-320.jpg)
![Beehive Data Group
Try 5 - 設定檔
指令落落長...將參數移動到設定檔裡
webpack.config.js
有了設定檔，只要執行
webpack 指令會試圖去載入當前目錄下
的 webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: /slideshow/honeys-data-dinner7-webpack/64051818/"bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};
$ webpack](https://image.slidesharecdn.com/honeysdatadinner7webpackjeffy-160715084551/85/Honey-s-Data-Dinner-7-webpack-31-320.jpg)
![Beehive Data Group
Try 6 - 擴充套件
擴充套件可以完成更多 loader 不能完成的
功能。webpack 已預設一些擴充套件，也
可由 npm 安裝第三方的插件。
在 webpack.config.js 加入擴充套件設定。
PS. BannerPlugin 是預設的插件，在檔案
的前端加上指定的說明。
var webpack = require('webpack');
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by
Beehive')
]
};
List of Plugins:
https://webpack.github.io/docs/list-of-plugins.html](https://image.slidesharecdn.com/honeysdatadinner7webpackjeffy-160715084551/85/Honey-s-Data-Dinner-7-webpack-32-320.jpg)
Honey's Data Dinner#7 webpack 包達人(入門)
- 3. Who Am I 施旭峰 Jeffy Shih bee.me@ninthday.info 數位足跡探索計畫 傳播學院+資科系 水火計畫 傳播學院+資科系 智慧型媒體實驗室 資科系
- 4. Beehive Data Group Outline ● 緣起 ● 什麼是 webpack ● 安裝 ● 小試身手 ● 醜化
- 6. Beehive Data Group Web 演化 圖片來源：http://www.slideshare.net/lis186/20130112webconf
- 7. Beehive Data Group 網路應用程式崛起 不再只是單純的顯示圖片文字資訊，更多互動與操作行為 ● 網頁初始化的過程有更多的 JavaScript ● 可以在現代的瀏覽器上做更多事 ● 較少全頁重新載入的行為 ? 甚至更多程式碼在單一頁面 Web Site website is defined by its content Web Application web application is defined by its interaction with the user
- 8. Beehive Data Group 模組化 模組化系統的演進 ● <script> 標籤 ● CommonJS ● AMD (Asynchronous Module Definition) 以及其衍伸的標準 ● ES6 (ECMAScript6) 模組
- 9. Beehive Data Group 模組化 <script> 標籤 缺點： ● 在全域下容易產生變數衝突 ● 按照順序載入，錯了相依的函式庫就不能使用 ● 模組相依性問題 ● 大型專案的自願難以管理 <script src=/slideshow/honeys-data-dinner7-webpack/64051818/"module1.js"></script> <script src="module2.js"></script> <script src="libraryA.js"></script> <script src="module3.js"></script>
- 10. Beehive Data Group 模組化 CommonJS 載入模組使用 require 方法，這個方法會讀取檔案並執行，最後回傳檔案內部 exports 的物件。 require("module"); require("../file.js"); exports.doStuff = function() {}; module.exports = someValue; 優點 ● 伺服器端模組可以被重複使用 ● 已經有許多 npm 的模組採用這種風格 ● 簡單而且容易使用 缺點 ● 同步的載入模組方式不適合瀏覽器，瀏 覽器是非同步載入 ● 沒有支援多模組的平行載入實作
- 11. Beehive Data Group 模組化 AMD 非同步載入 為瀏覽器環境設計的規範，定義了非同步載入模組。 require(['module', '../file'], function(module, file) { /* code here */}); define('mymodule', ["dep1", "dep2"], function(d1, d2) { return someExportedValue; }); 優點 ● 符合網路非同步載入的需求 ● 可多模組平行載入 缺點 ● 較高的開發成本，撰寫比較多的程式碼 ，比較難讀寫和維護 ● 看起來像是某種取巧的解法實作
- 12. Beehive Data Group 模組化 ES6 模組 import "jquery"; export function doStuff() {} module "localModule" {} 優點 ● 靜態解析非常容易 ● 未來將會是 ECMAScript 標準 缺點 ● 瀏覽器尚未全面支援，還需要花些時間 ● 新版的指令 ● 非常少模組已採用此種方式
- 13. Beehive Data Group 期望的模組化系統 ● 兼容多種模組化，可以輕鬆的加入其他模組標準 ● 讓開發者選擇模組化的標準 ● 讓已存在的程式碼可以運作 ● 除了 JavaScript 其他資源也需要模組化
- 14. Beehive Data Group 所有資源都是模組 除了 JavaScript 其他資源也需要模組化 ● stylesheets ● images ● webfonts ● html for templating ● coffeescript ? javascript ● less stylesheet ? css ● jade ? html ● i18n ? something require("./style.css"); require("./style.less"); require("./template.jade"); require("./image.png");
- 16. Beehive Data Group 什麼是 webpack
- 17. Beehive Data Group 什麼是 Webpack
- 18. Beehive Data Group 什麼是 Webpack 一個模組的封裝工具（module bundler），由德國的 Tobias Koppers 所開發。 webpack 會將模組與其相依性的模組、函式庫，其他需要預先編譯的檔案等整合產 生此模組的靜態資源檔。 簡單說： ● 將CSS、圖片與其他資源打包至一個.js之中 ● 打包之前預處理（less、coffeescript、jsx等） ● 依 entry 文件不同，把 .js 分為多個 .js ● 豐富的模組元件
- 19. Beehive Data Group 再造輪子 為何不用其他封裝工具？ 目標： ● 能夠拆分相依性的關係結構變成程式碼片段，依據需求載入 ● 盡可能減少初始化載入的時間 ● 各種靜態資源檔也應該要能被模組化 ● 整合其他第三方函式庫為模組 ● 絕大部份能夠依照需求自訂修改邏輯 ● 適合大型專案
- 20. Beehive Data Group Webpack 有啥特點？ ● 拆分程式碼（Code Splitting） ● Loader ● 智慧型解析 ● 擴充套件系統 ● 快速運行
- 22. Beehive Data Group 準備 1. 安裝 node.js （https://nodejs.org） Node.js 官方提供了各種不同OS的安裝方法： https://nodejs.org/en/download/package-manager/ 2. 用 npm 更新 npm （預設版本 2.15.8 -> 3.10.2） $ sudo apt-get install curl $ curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - $ sudo apt-get install -y nodejs $ sudo npm install npm -g
- 23. Beehive Data Group 安裝 兩種安裝方式 1. 安裝於全域 2. 安裝於專案目錄 $ npm init $ npm install webpack --save-dev $ sudo npm install webpack -g
- 24. Beehive Data Group 安裝 ● 指定版本安裝 ● 查看 webpack 版本訊息 ● 安裝 webpack 開發工具 $ npm info webpack $ npm install webpack@1.2.x --save-dev $ npm install webpack-dev-server --save-dev
- 25. Beehive Data Group 指令介面 <entry> 傳入一個檔案或者路徑字串，實作的行為來說明，就是用來 require 其他模組的檔案。 <output> 表示要輸出的路徑 $ webpack <entry> <output>
- 27. Beehive Data Group Try 1 entry.js index.html run document.write("It works."); <html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src=/slideshow/honeys-data-dinner7-webpack/64051818/"bundle.js" charset="utf-8"></script> </body> </html> $ webpack ./entry.js bundle.js
- 28. Beehive Data Group Try 2 content.js entry.js run module.exports = "It works from content.js."; document.write(require("./content.js")); $ webpack ./entry.js bundle.js
- 29. Beehive Data Group Try 3 - 第一個 LOADER Webpack 預設只能夠處理 js 檔，需要 css-loader 來處理 css，再透過 style-loader 來把樣式套用到 DOM 上。 style.css entry.js $ npm install css-loader style-loader body { background: yellow; } require("!style!css!./style.css"); document.write(require("./content.js"));
- 30. Beehive Data Group Try 4 - 綁定 LOADERS 實務上並不希望一直重複撰寫這種長長的 pipe require("!style!css!./style. css"); 根據副檔名綁定設定其 loaders，就只要寫 require("./style.css") entry.js run $ webpack ./entry.js bundle.js --module-bind 'css=style!css' require("./style.css"); document.write(require("./content.js")); 單引號，雙引號 要加跳脫字元
- 31. Beehive Data Group Try 5 - 設定檔 指令落落長...將參數移動到設定檔裡 webpack.config.js 有了設定檔，只要執行 webpack 指令會試圖去載入當前目錄下 的 webpack.config.js module.exports = { entry: "./entry.js", output: { path: __dirname, filename: /slideshow/honeys-data-dinner7-webpack/64051818/"bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style!css" } ] } }; $ webpack
- 32. Beehive Data Group Try 6 - 擴充套件 擴充套件可以完成更多 loader 不能完成的 功能。webpack 已預設一些擴充套件，也 可由 npm 安裝第三方的插件。 在 webpack.config.js 加入擴充套件設定。 PS. BannerPlugin 是預設的插件，在檔案 的前端加上指定的說明。 var webpack = require('webpack'); module.exports = { entry: './entry.js', output: { path: __dirname, filename: 'bundle.js' }, module: { loaders: [ {test: /.css$/, loader: 'style!css'} ] }, plugins: [ new webpack.BannerPlugin('This file is created by Beehive') ] }; List of Plugins: https://webpack.github.io/docs/list-of-plugins.html
- 33. Beehive Data Group 開發時期伺服器 webpack 提供一個 localhost:8080 的 express server ，讓我們在開發時期可 以更快速的觀察結果，當然會自動編譯，同時自動更新頁面(socket.io) 安裝 啟動 $ npm install webpack-dev-server -g $ webpack-dev-server --progress --colors
- 34. Beehive Data Group 常用指令 ● webpack：在開發模式下一次性的編譯 ● webpack -p：建置 production-ready 的程式（壓縮） ● webpack --watch：持續更新建置，在開發模式下因應程式碼修改（儲存時有異 動） ● webpack -d：產生 source maps 檔案（.js.map） ● webpack --progress --colors：含處理進度與顏色
- 37. Beehive Data Group webpack demo Github Webpack Demo: https://github.com/ruanyf/webpack-demos Demo07: UglifyJs Plugin https://github.com/ruanyf/webpack-demos#demo07-uglifyjs-plugin-source
- 38. Beehive Data Group 其他資源 Pete hunt： webpack-howto https://github.com/petehunt/webpack-howto