honey's data dinner#7 webpack 包達人(入門)
TRANSCRIPT
Beehive Data Group
Webpack包達人（入門）
Beehive Data Group
坑
Beehive Data Group
Outline● 緣起
● 什麼是 webpack
● 安裝
● 小試身手
● 醜化
Beehive Data Group
緣起
Beehive Data Group
Web 演化
圖片來源：http://www.slideshare.net/lis186/20130112webconf
Beehive Data Group
網路應用程式崛起
不再只是單純的顯示圖片文字資訊，更多互動與操作行為
● 網頁初始化的過程有更多的 JavaScript
● 可以在現代的瀏覽器上做更多事
● 較少全頁重新載入的行為 ➞ 甚至更多程式碼在單一頁面
Web Site
website is defined by its content
Web Application
web application is defined by its interaction with the user
Beehive Data Group
模組化
模組化系統的演進
● <script> 標籤
● CommonJS
● AMD (Asynchronous Module Definition) 以及其衍伸的標準
● ES6 (ECMAScript6) 模組
Beehive Data Group
模組化
<script> 標籤
缺點：
● 在全域下容易產生變數衝突
● 按照順序載入，錯了相依的函式庫就不能使用
● 模組相依性問題
● 大型專案的自願難以管理
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>
Beehive Data Group
模組化
CommonJS
載入模組使用 require 方法，這個方法會讀取檔案並執行，最後回傳檔案內部 exports 的物件。
require("module");
require("../file.js");
exports.doStuff = function() {};
module.exports = someValue;
優點
● 伺服器端模組可以被重複使用
● 已經有許多 npm 的模組採用這種風格
● 簡單而且容易使用
缺點
● 同步的載入模組方式不適合瀏覽器，瀏覽器是非同步載入
● 沒有支援多模組的平行載入 實作
Beehive Data Group
模組化
AMD 非同步載入
為瀏覽器環境設計的規範，定義了非同步載入模組。
require(['module', '../file'], function(module, file) { /* code here */});
define('mymodule', ["dep1", "dep2"], function(d1, d2) { return someExportedValue;});
優點
● 符合網路非同步載入的需求
● 可多模組平行載入
缺點
● 較高的開發成本，撰寫比較多的程式碼
，比較難讀寫和維護
● 看起來像是某種取巧的解法實作
Beehive Data Group
模組化
ES6 模組
import "jquery";
export function doStuff() {}
module "localModule" {}
優點
● 靜態解析非常容易
● 未來將會是 ECMAScript 標準
缺點
● 瀏覽器尚未全面支援，還需要花些時間
● 新版的指令
● 非常少模組已採用此種方式
Beehive Data Group
期望的模組化系統
● 兼容多種模組化，可以輕鬆的加入其他模組標準
● 讓開發者選擇模組化的標準
● 讓已存在的程式碼可以運作
● 除了 JavaScript 其他資源也需要模組化
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");
Beehive Data Group
所以我們需要
？？
Beehive Data Group
什麼是 webpack
Beehive Data Group
什麼是 Webpack
Beehive Data Group
什麼是 Webpack一個模組的封裝工具（module bundler），由德國的 Tobias Koppers 所開發。
webpack 會將模組與其相依性的模組、函式庫，其他需要預先編譯的檔案等整合產
生此模組的靜態資源檔。
簡單說：
● 將CSS、圖片與其他資源打包至一個.js之中
● 打包之前預處理（less、coffeescript、jsx等）
● 依 entry 文件不同，把 .js 分為多個 .js
● 豐富的模組元件
Beehive Data Group
再造輪子
為何不用其他封裝工具？
目標：
● 能夠拆分相依性的關係結構變成程式碼片段，依據需求載入
● 盡可能減少初始化載入的時間
● 各種靜態資源檔也應該要能被模組化
● 整合其他第三方函式庫為模組
● 絕大部份能夠依照需求自訂修改邏輯
● 適合大型專案
Beehive Data Group
Webpack 有啥特點？
● 拆分程式碼（Code Splitting）
● Loader
● 智慧型解析
● 擴充套件系統
● 快速運行
Beehive Data Group
裝
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
Beehive Data Group
安裝
兩種安裝方式
1. 安裝於全域
2. 安裝於專案目錄
$ npm init$ npm install webpack --save-dev
$ sudo npm install webpack -g
Beehive Data Group
安裝
● 指定版本安裝
● 查看 webpack 版本訊息
● 安裝 webpack 開發工具
$ npm info webpack
$ npm install [email protected] --save-dev
$ npm install webpack-dev-server --save-dev
Beehive Data Group
指令介面
<entry>
傳入一個檔案或者路徑字串，實作的行為來說明，就是用來 require 其他模組的檔案。
<output>
表示要輸出的路徑
$ webpack <entry> <output>
Beehive Data Group
小試身手
Beehive Data Group
Try 1entry.js
index.html
run
document.write("It works.");
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body></html>
$ webpack ./entry.js bundle.js
Beehive Data Group
Try 2content.js
entry.js
run
module.exports = "It works from content.js.";
document.write(require("./content.js"));
$ webpack ./entry.js bundle.js
Beehive Data Group
Try 3 - 第一個 LOADERWebpack 預設只能夠處理 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"));
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"));
單引號，雙引號要加跳脫字元
Beehive Data Group
Try 5 - 設定檔
指令落落長...將參數移動到設定檔裡
webpack.config.js
有了設定檔，只要執行
webpack 指令會試圖去載入當前目錄下
的 webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
$ webpack
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
Beehive Data Group
開發時期伺服器
webpack 提供一個 localhost:8080 的 express server ，讓我們在開發時期可
以更快速的觀察結果，當然會自動編譯，同時自動更新頁面(socket.io)
安裝
啟動
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
Beehive Data Group
常用指令
● webpack：在開發模式下一次性的編譯
● webpack -p：建置 production-ready 的程式（壓縮）
● webpack --watch：持續更新建置，在開發模式下因應程式碼修改（儲存時有異
動）
● webpack -d：產生 source maps 檔案（.js.map）
● webpack --progress --colors：含處理進度與顏色
Beehive Data Group
醜化
Beehive Data Group
醜化
Beehive Data Group
webpack demoGithub Webpack Demo:
https://github.com/ruanyf/webpack-demos
Demo07: UglifyJs Pluginhttps://github.com/ruanyf/webpack-demos#demo07-uglifyjs-plugin-source
Beehive Data Group
其他資源
Pete hunt： webpack-howto
https://github.com/petehunt/webpack-howto
Beehive Data Group
2016台灣首屆農業黑客松
這是最好的時代，也是最壞的時代，我們正面對全
球自然、文化、社會環境改變，食品安全、食農教
育、產銷物流都存在各種待解難題；
阿龜松(Agrithon)是農業(Agriculture)以及黑客松
(Hackathon)的組合字，我們是台灣農業阿龜松團
隊，將於今年8月13日於集思台大會議中心舉辦台
灣首屆農業黑客松，誠摯邀請各方好手用知識、技
術與熱情，一同發現並且解決農業問題。
活動網站：http://2016.agrithon.tw/
Beehive Data Group
Thx