webpack 入門

痞客邦 前端⼯工程師 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