在昨天的文章裡，有針對 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 檔案內，設定基本 entry 和 output 、接著來安裝 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.js 和 sw-generated-webpack.js：

參考文件

• goldhand/sw-precache-webpack-plugin
• webpack
• babel/babel-loader

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