Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

webpack 入門

4,484 views

Published on

痞客邦內部前端技術會議分享

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

webpack 入門

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

×