痞客邦 前端⼯工程師 Anna Su
webpack ⼊入⾨門
1
AGENDA
✦ webpack 介紹
✦ webpack 安裝
✦ webpack 範例
2
webpack 是什麼?
3
?
webpack is a module bundler
4
webpack 介紹
• 程式碼打包器(module bundler),將多⽀支 javascript 檔案合成⼀一⽀支並在過程中做轉換處理
webpack 預設只能夠轉換、編譯、結合成⼀一份 javascript ,但可以透過 loaders 將其他資源轉成 JavaScript,如此⼀一來,所有資源都能變成模組。
5
打包成module...
要幹⿇麻?
6
webpack 介紹
<script>-tag style
if you didn’t use a module system.
<script src="module1.js"></script><script src="module2.js"></script><script src="libraryA.js"></script><script src="module3.js"></script>
7
webpack 介紹
if you didn’t use a module system.<script>-tag style
8
webpack 介紹
<script>-tag style
Common problems
• Order of loading is important.• Developers have to resolve dependencies of modules/libraries.• In big projects the list can get really long and difficult to manage.
9
webpack 介紹
<script>-tag style
Common problems
• 載⼊入順序很重要• 開發者必須⾃自⼰己解決 modules/libraries 的相依性問題• ⼤大型專案的程式碼冗⻑⾧長,變得很難管理
10
webpack 介紹
⽤用了webpack 你就可以不⽤用管 js 的相依問題
合併所有 js 為⼀一⽀支 bundle.js 檔案,並⽣生成 sourcemap
11
webpack 介紹
讓 js、css、圖⽚片模組化 透過 webpack 設定,統⼀一管理。
開發更單純
12
webpack 介紹
var React = require('react');require("../file.js");
webpack ⽀支援 CommonJS
13
webpack 介紹
• Server-side modules can be reused• There are already many modules in this style (npm)• very simple and easy to use.
webpack ⽀支援 CommonJS 的優點
Pros
14
webpack 介紹
• Server-side 的模組可以被重複使⽤用(如果你是寫Node.js)• 已經有很多模組使⽤用CommonJS (npm)• 使⽤用起來⾮非常容易
webpack ⽀支援 CommonJS
Pros
15
webpack 介紹
webpack + BABEL 可以轉換不同語法,例如 ES6, coffescript, jsx 等成為標準 ES5 javascript
+16
webpack 介紹
✦ 處理 module 相依關係
✦ 降低初始載⼊入時間
✦ 可以整合第三⽅方模組庫 例如:react
✦ 可以轉換不同語法 例如 ES6, coffescript, jsx 轉換成標準 ES5 javascript
✦ 適⽤用於⼤大型專案
17
webpack 介紹 - ⼩小結
18
webpack 安裝
• 要同時安裝 global 與 local 版本
19
webpack 安裝
$ sudo npm install webpack -g
$ npm install webpack --save-dev
20
webpack
範例
所有設定位於
webpack.config.js 內
21
webpack 範例
webpack 範例重點
✦ entry
✦ module / loaders
✦ plugins
✦ output
✦ devServer22
entry
23
webpack 範例重點
找到webpack的⼊入⼝口檔案
24
webpack.config.js
boot.jsx
webpack 範例
module / loaders
25
webpack 範例重點
• 透過 loaders 將其他資源轉成 JavaScript,如此⼀一來,所有資源都能變成模組。
26
webpack.config.js
webpack 範例
• Loaders allow you to preprocess files as you require() or “load” them.
27
webpack.config.js
boot.jsx
webpack 範例
• Loaders allow you to preprocess files as you require() or “load” them.
篩選對應的檔案格式並進⾏行對應設定
28
webpack 範例
使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定29
webpack 範例
使⽤用exclude參數,排除 node_module 資料夾
Webpack accepts an array of loader objects which specify loaders to apply to files that match the test regex and exclude files that match the exclude regex.
1. test 參數: 藉由正規表達式找到符合條件的檔案
2. exclude 參數:藉由正規表達式找到不符合條件的檔案
3. loader 參數: 由右到左執⾏行 loader 設定30
webpack 範例
webpack 範例 - react-hot-loaderReact Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.
React Hot Loader 這個套件會幫你瞬間重新整理,不會改變 React 元件的編輯狀態
31
webpack.config.js
webpack 範例 - babel-loaderBabel is a compiler for writing next generation JavaScript.
babel-loader 這個套件會轉換 Javascript 語法,從ES6 或 ES7 轉成ES5
32
webpack.config.js
webpack 範例 - sass-loader 、autoprefixer-loader
由右到左執⾏行 ⼀一連串的 loader 設定
33
webpack.config.js
webpack.config.js
webpack 範例 - url-loader
url-loader 這個套件會幫你打包圖⽚片,可以轉換成 base64 格式的 dataUrl
例如:{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
34
webpack.config.js
35
webpack 範例重點
plugins
36
webpack.config.js
webpack 範例
webpack 範例 - extract-text-webpack-plugin
透過 extract-text-webpack-plugin 這個套件會幫你打包CSS 檔案
37
output
38
webpack 範例重點
webpack 範例
將 js 檔案打包,名稱為 bundle.js
39
devSever
40
webpack 範例重點
webpack 範例 - 其他參數
41
webpack 範例 - content-base <file/directory/url>
base path for the content
42
webpack 範例 - filename
對應 entry 檔案名稱
43
webpack 範例 - publicPath
webpack-dev-server publicPath
44
webpack 範例 - hot
adds the HotModuleReplacementPlugin and switch the server to hot mode.
45
webpack 範例 - inline
embed the webpack-dev-server runtime into the bundle
46
webpack 範例 - quitedon’t output anything to the console
47
webpack 範例 - noInfosuppress boring information
48
webpack 範例 - lazylazy: false 才會 livereload
49
webpack 範例 - colorsadd some colors to the output
50
感謝聆聽
51