iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 25
0
Modern Web

30 天 Progressive Web App 學習筆記系列 第 25

Day 25 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 應用

昨天的文章裡,有針對 sw-precache-webpack-plugin 做介紹,而今天藉由 To-Do List 這個範例,來實際應用 sw-precache-webpack-plugin

sw-precache-webpack-plugin 是 webpack 的 plugin,所以在安裝 sw-precache-webpack-plugin 之前,我們要先安裝 webpack,才能夠執行 webpack。


1. 安裝 webpack

npm install --save-dev webpack

本範例安裝的版本是 1.14.0

接著我們在根目錄下新增 webpack.config.js 檔案,作為 webpack 的設定檔:

var path = require('path');

module.exports = {
  context: __dirname,

  entry: {
    main: path.resolve(__dirname, './src/main.js'),
  },

  output: {
    path: path.resolve(__dirname, './assets'),
    filename: 'bundle.js',
  }
}

說明對應參數:

  • path: nodeJS 原生提供的模組(module),用來處理路徑相關的行為
  • module.exports: 是 nodeJS 輸出模組的語法,採用 commonJS 的規範
  • context: 設定基礎路徑,給絕對位置
  • __dirname: 是 nodeJS 的全域變數,會取得當前檔案的絕對路徑
  • entry: 找到 webpack 的入口檔案

我們來觀察 To-Do List 的範例架構(可參考下方圖片):
src 資料夾內放 JavaScript(main.js) 和 CSS(main.css) 的來源檔案,assets 放著 images 的資源。

webpack.config.js 檔案內透過 entry 指定 webpack 的入口檔案,範例中 設定為 ./src/main.js,因為 To-Do List 範例比較單純,所以只有一隻 main.js 檔案,否則在實際的專案中,通常會有多個 JavaScript 和 CSS 檔案,再透過 webpack 做打包的動作。

由於希望將打包好的 JavaScript 檔案取名為 bundle.js 並且存放在 assets 資料夾裡,所以設定:

output: {
    path: path.resolve(__dirname, './assets'),
    filename: 'bundle.js',
  }

2. 安裝 sw-precache-webpack-plugin

剛剛已經在 webpack.config.js 檔案內,設定基本 entryoutput 、接著來安裝 sw-precache-webpack-plugin

npm install --save-dev sw-precache-webpack-plugin

3. 新增 webpack.config.js

再來修改 webpack.config.js 檔案,添加 sw-precache-webpack-plugin 設定如下:

plugins: [
  new SWPrecacheWebpackPlugin(
    {
      cacheId: 'todo-list',
      filepath: './sw-generated-webpack.js',
      maximumFileSizeToCacheInBytes: 4194304,
      runtimeCaching: [{
        handler: 'cacheFirst',
        urlPattern: /[.]png$/,
      }],
    }
  ),
]

說明 sw-precache-webpack-plugin 的內容:

  • 將 cache 的 unique 名稱設定為 'todo-list'
  • 指定產出的檔案路徑和名稱為 './sw-generated-webpack.js'
  • 限制 Cache 的最大檔案為 4 MB
  • 指定 .png URL 的 cache 方式:先去判斷有沒有對應的 cache,如果有、就直接回傳舊的 cache,如果沒有、才透過網路發送 request,獲取資料。

webpack.config.js 檔案修改完畢之後,執行 webpack:

 webpack -p

結果出現以下錯誤:

原因是 main.js 有使用到 ES6 的語法,所以要再透過 Webpack plugin for Babel 的工具進行編譯,進而轉換 JavaScript 語法,從 ES6 或 ES7 轉成 ES5。

4. 安裝 babel-loader

babel-loader 是 Webpack plugin for Babel,可以參考babel-loader 文件

安裝指令如下:

npm install --save-dev babel-loader babel-core babel-preset-es2015

再針對 babel-loader 的設定修改 webpack.config.js 檔案:

module: {
  loaders: [{
    test: /\.js$/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015']
    },
    include: [
      path.resolve(__dirname, './src/main.js')
    ]
  }]
}

今日小結

  1. 安裝 webpack
  2. 安裝 sw-precache-webpack-plugin
  3. 新增 webpack.config.js 檔案
  4. 安裝 babel-loader
    • babel-core
    • babel-loader
    • babel-preset-es2015
  5. 修改 webpack.config.js 檔案
  6. 執行 webpack -p

結果有成功產生 bundle.jssw-generated-webpack.js


參考文件


本人小小筆記,如有錯誤或需要改進的部分,歡迎給予回饋。
我將會用最快的速度修正,m(_ _)m。謝謝

上一篇
Day 24 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - sw-precache-webpack-plugin 簡介
下一篇
Day 26 - 30 天 Progressive Web App 學習筆記 - To-Do List 實作 PWA - React + Redux + Webpack 環境建置
系列文
30 天 Progressive Web App 學習筆記30

尚未有邦友留言

立即登入留言