webpack的入門實踐
我會將所有的讀者概括為初學者，即使你可能有基礎，學習本節之前我希望你具有一定的JavaScript和node基礎
- 文中的
... ...代表省略掉部分代碼，和上面的代碼相同
- 文中的文件夾如果沒有說創建，並且項目默認沒有的是需要你手動增加的
- 不會特別細緻，但是足夠入門
資源
什麼是webpack
Web瀏覽器使用HTML，CSS和JavaScript。隨着項目的發展，跟蹤和配置所有這些文件變得非常複雜,解決這個問題就需要一個新的工具
類似webpack的工具還有Grunt和Gulp，webpack是模塊管理工具，把你的項目按照你的想法進行劃分模塊打包，舉個最簡單的例子，這個頁面需要加載一個 a.js和b.js，但是你只想加載一個js文件，就可以使用webpack將兩個文件進行合併，當然webpack的功能不止於此，代碼轉化、項目優化、代碼分割、代碼預編譯、自動構建、自動刷新…
再比如你想你的代碼兼容其他老的瀏覽器，你的css代碼兼容不同的瀏覽器內核，或者你想自動精簡掉你寫了但是沒有用到的代碼，這些都可以使用webpack實現
如果你是vue或者react等框架的使用者，肯定使用過 vue-cli 或 react-create-app 這類腳手架工具，那麼實現這個效果，就要學習webpack
快速入門
注意本文都是webpack4的內容
安裝
創建一個 webpackdemo文件夾，使用命令npm init -y快速初始化一個項目
安裝 webpack可以使用全局安裝
npm install webpack -g
但是我更推薦你在每個項目裏面單獨引入，這樣可以控製版本,如果你使用 webpack 4+ 版本，你還需要安裝 CLI。
npm install -D webpack@<version>
npm install -D webpack-cli
本文默認使用項目引入的方式，我們在根目錄下新建 src/index.js，webpack在不進行任何配置的情況下，會默認尋找這個文件
然後命令行執行node_modules\.bin\webpack,如果你是全局安裝的可以直接使用webpack命令
注意此時命令行爆黃色警告，這是沒有指定當前模式的原因，並且可以發現，目錄下多了一個 dist/main.js文件，這便是默認的輸出文件
為了體驗項目的打包，我們新建一個src/clg.js文件
export default function clg(msg) {
console.log(msg);
}
我們在index.js裏面導入並使用
import clg from './clg';
clg('webpack init');
然後根目錄我們新建一個 index.html文件，引入打包后的文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./dist/main.js"></script>
</head>
<body>
</body>
</html>
然後修改一下打包命令,指定當前為開發模式，再次運行.\node_modules\.bin\webpack --mode development
這次打包沒有爆警告，並且我們打開index.html控制台查看結果
webpack.config.js配置文件
在前面，我們都是使用webpack-cli為我們提供的默認配置，如果我們想使用webpack更強大的功能還是需要自定義配置文件的，在根目錄新建webpack.config.js，執行webpack命令的時候會自動找到它
const path = require('path');
module.exports = {
// 環境
mode: 'development',
// 目標文件
entry: [path.resolve(__dirname, './src/index.js')],
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: 'main.js' //文件名稱
},
// 插件
plugins: [
],
// 給導入的文件制定規則
module: {
}
}
為了方便調試，我們在 package.json中添加命令，此時執行命令npm run dev或npm run build就非常方便了
注意 scripts命令裏面可省略 .\node_modules\.bin\使用 npx webpack也是這個效果
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
多個目標和輸出文件
在上面是一個目標文件index.js和一個輸出文件main.js，如果我們想要對多個目標文件進行打包，且輸出多個文件該怎麼辦呢？我們在根目錄新建一個 other.js
首先我們將entry修改為多個目標文件，並設置一個鍵名，然後修改輸出文件的名稱為變量[name]
const path = require('path');
module.exports = {
// 環境
mode: 'development',
// 目標文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js')
},
// [path.resolve(__dirname, './src/index.js'), path.resolve(__dirname, './src/other.js')],
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: '[name].bundle.js' //文件名稱
},
}
此時我們執行 npm run build可發現dist目錄的多個js文件
使用插件來測試程序
在上面，我們自己創建了一個 index.html文件來測試我們打包的文件是否正常，其實webpack為我們提供了更為自動的方式，在這裏我們將使用第一個webpcak插件html-webpack-plugin,首先需要安裝它
npm i html-webpack-plugin -D
然後我們在 webpack.config.js中配置使用這個插件
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 目標文件
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js'),
},
// 自定義輸出文件
output: {
path: path.resolve(__dirname, './dist'), //路徑
filename: 'main.js' //文件名稱
},
// 插件
plugins: [
new HtmlWebpackPlugin({
title: "Webpack init",
}),
],
}
此時，我們刪除 index.html文件，然後再次執行npm run build可以發現，webpack自動為我們創建了一個indedx.html文件，並引入了打包后的js文件
多個頁面
在上面，我們都是使用的一個 index.html單頁面，實際開發中漸進式的單頁面程序也比較多，但是還是會有多頁面的場景
簡單的修改一下webpack.config.js,多次實例化插件就可以了，filename為輸出文件名，chunks為這個頁面需要使用的js文件，當然如果你不是使用的自動生成頁面，可以使用template屬性指定你的頁面位置
module.exports = {
... ...
// 插件
plugins: [
new HtmlWebpackPlugin({
filename:"index.html",
title: "Webpack init",
chunks:['index']
}),
new HtmlWebpackPlugin({
filename:"other.html",
title: "Webpack init",
chunks:['other']
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(),
],
... ...
}
此時我們使用npm run dev,此時可以發現dist目錄輸出了兩個頁面並引入不同的js文件
source map
打包后的js文件都混淆到了一個或者多個文件中，丟失了原本的文件格式，如果在運行過程中出現bug，很難定位原本的錯誤位置 source map 就可以解決這個問題
為了更容易地追蹤錯誤和警告，JavaScript 提供了 source map 功能，將編譯后的代碼映射回原始源代碼。如果一個錯誤來自於 b.js，source map 就會明確的告訴你。
開啟 source map 非常簡單，只需要在配置文件webpack.config.js中增加
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
... ...
devtool: "cheap-module-eval-source-map",
... ...
}
為了驗證是否生效，我們在other.js中增加
console.log('other');
console.error("error")
然後使用npm run dev，接着在控制台查看錯誤並點擊，便能跳轉到出錯的位置
devtool有多個模式，不同的性能和品質，開發環境中我們希望性能更好，生產環境我們希望質量更好詳細配置
開發環境可以使用cheap-module-eval-source-map、eval 、eval-source-map
生產環境可以使用inline-source-map、inline-cheap-module-source-map、cheap-source-map
觀察模式和webpack-dev-server
在上面的內容中，每次修改內容后都需要手動執行構建命令，webpack為我們提供了更為自動的方法
觀察模式
我們只需簡單的修改一下命令npm run dev --watch,同樣的我們為了方便，可以直接將命令寫入 package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch":"webpack --mode production --watch"
},
此時，我們執行npm run watch命令后，只要修改文件中的內容，webpack即可自動構建
webpack-dev-server
但是在實際開發中，使用webpack-dev-server（簡稱wds）更為方便，它為我們提供了一個簡單的服務器，並且瀏覽器能夠實時加載，也就是說，當你修改文件保存后，瀏覽器可自動加載最新的內容，並且這一切都是發生在內存中，構建速度更快
安裝
npm i webpack-dev-server -D
同樣的我們在 package.json中添加一個命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"watch": "webpack --mode production --watch",
"server": "webpack-dev-server --mode development"
},
此時，我們只需執行npm run server，webpack便可自動創建一個服務器，並將項目運行在其中，當我們修改文件中的任意內容的時候，頁面便會自動刷新
如果使用過 vscode的插件live server的同學，不難發現，這就是類似的功能
我們還可以在 webpack.config.js中進一步的對 wds進行配置
module.exports = {
... ...
devServer: {
/**
* 日誌模式 friendly-errors-webpack-plugin 插件可以優化輸出
* errors-only 只在發生錯誤時觸發
* minimal 只在發生錯誤或者有新的編譯時輸出
* none 沒有輸出
* normal 標準輸出
* verbose 全部輸出
*/
stats: "errors-only",
//默認地址 localhost
host: process.env.HOST,
//默認端口 8080
port: process.env.PORT,
//是否直接打開瀏覽器
open: true,
},
... ...
}
此時我們再次運行 npm run server,webpack便能按照我們的配置來構建了
HMR
模塊熱替換(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允許在運行時更新各種模塊，而無需進行完全刷新。
在上面的內容中，我們修改文件的部分內容，webpack都需要將項目重新構建並通知瀏覽器重新渲染，這個過程十分浪費資源，使用 HMR就可以實現，修改哪裡，重新加載哪裡的這個效果
NamedModulesPlugin插件是在熱加載時直接返回更新文件名
使用 HMR我們只需要簡單的配置即可
webpack.config.js
... ...
const webpack = require('webpack');
module.exports = {
... ...
// 插件
plugins: [
... ...
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
... ...
//是否開啟熱更替
hot: true
},
}
為了驗證是否是局部更替，我么修改一下文件內容
index.js
import clg from './clg';
console.log('webpack init');
// module.hot Webpack通過全局變量公開HMR接口
if (module.hot) {
module.hot.accept('./clg.js', function () {
clg('檢測到clg模塊修改');
})
}
此時我們使用 npm run server 將項目運行起來，簡單的修改 index.js文件中內容，發現控制台只打印了
我們再次修改clg.js中內容，打個空格再保存即可，此時驗證了我們想要的效果
生產環境和開發環境分離
開發環境(development)和生產環境(production)的構建目標差異很大,官方建議為每個環境編寫彼此獨立的 webpack 配置。
我們將新建兩個配置文件webpack.dev.js（開發環境）和webpack.prod.js（生產環境）但是它們具有很多相同的配置，所以我們再新建一個webpack.common.js(通用配置)文件
我們使用webpack-merge插件來將不同的環境配置文件和通用配置文件進行合併，並且使用clean-webpack-plugin插件來每次重置我們的構建文件夾
npm i webpack-merge -D
npm i clean-webpack-plugin -D
webpack.common.js
const path = require('path');
const webpack = require('webpack');
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [path.resolve(__dirname, './src/index.js')],
plugins: [
new CleanWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack init'
})
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
]
}
};
webpack.dev.js
我們再開發環境配置文件中配置 server的相關信息，並且打開source-map
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode:"development",
devtool: 'eval',
devServer: {
stats: "errors-only",
//默認地址 localhost
host: process.env.HOST,
//默認端口 8080
port: process.env.PORT,
//是否直接打開瀏覽器
open: true,
//是否開啟熱更替
hot: true,
},
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
});
webpack.prod.js
我們在生產環境配置文件中省略掉其他配置文件
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: "production",
});
然後我們在 package.json增加一些命令
"envdev":"webpack-dev-server --config webpack.dev.js",
"envbuild":"webpack --config webpack.prod.js"
此時，我們的項目構建就更加清晰了
管理資源文件
webpack不僅僅是打包 js文件這麼簡單，此處我們簡單的介紹幾個常用的資源打包方式，更詳細的內容可以參考官方文檔
管理css
使用過腳手架的同學應該都記得，項目裏面的css文件可以通過js直接引入的方式使用
import 'xxx.css';
來簡單實踐一下，首先安裝插件
npm i style-loader css-loader -D
為了展示我們的打包效果，我們新建一個 js/divdoc.js文件用來在頁面中渲染出一個字符串（此時我們已將clg.js也轉移到 ./js 文件夾）
export default function divdoc() {
//創建一個dom
let element = document.createElement('div');
element.innerHTML = "webpack init";
element.classList.add('init');
//將dom渲染到頁面上
document.body.appendChild(element);
}
在index.js中導入並使用
import clg from './js/clg';
import divdoc from './js/divdoc';
console.log('webpack init now');
divdoc();
// module.hot Webpack通過全局變量公開HMR接口
if (module.hot) {
module.hot.accept('./js/clg.js', function () {
clg('檢測到clg模塊修改');
})
}
此時運行 npm run server查看效果
接下來我們新建 src/css/app.css文件
我們前面渲染的dom節點是包含一個 class名為 init的
.init{
color: red;
}
編寫規則webpack.dev.js
module.exports = {
... ...
// 給導入的文件制定規則
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
]
}
}
在index.js中導入，並查看效果
import './css/app.css';
順便可以打包一下less，首先安裝插件npm i -D less-loader,然後寫一下規則
module: {
rules: [
//打包css文件的規則
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},
]
}
我們新建一個 src/css/app.less文件
.init{
color: red;
}
我們在 index.js中註釋掉原本導入的 app.css，然後導入less文件
import './css/app.less';
重新構建項目，查看項目，效果依然生效，同理sass、stylus也是這個用法，這裏不再贅述
分離css
在前面，我們打包css，最終都是將css代碼添加到頁面的 style標籤中，如果我們想將所有的css都打包到專門的文件裏面可以使用mini-css-extract-plugin插件
npm i mini-css-extract-plugin -D
然後修改一下配置webpack.prod.js
... ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
... ...
// 插件
plugins: [
new MiniCssExtractPlugin({
filename: "styles/[name].css",
})
],
// 給導入的文件制定規則
module: {
rules: [
//打包css文件的規則
// {
// test: /\.css$/,
// use: ['style-loader', 'css-loader']
// },
{
test: /\.css$/i,
use: [
MiniCssExtractPlugin.loader, 'css-loader'
],
}
]
}
... ...
}
此時我們執行npm run build可以發現dist目錄下面創建了一個index.css文件，因為我們是在 index.js中導入css文件的，[name]的值是js的文件名，而不是css的名
當然如果你想指定輸入和導出的css的名字也是可以的，使用這種方式，你就不需要在js中再次引入css文件了
entry: {
index: path.resolve(__dirname, './src/index.js'),
other: path.resolve(__dirname, './src/other.js'),
app: path.resolve(__dirname, './src/css/app.css')
},
webpack在處理樣式方面還有很多很強大的插件，比如purgecss可以精簡掉頁面中沒有使用的css樣式、Autoprefixer可以自動給你添加不同瀏覽器兼容的css插件
管理圖片和字體
在網頁中，圖片一般都是加載的網路路徑，但是在開發中我們都是使用的本地圖片，那麼為了保證上線后和本地的資源位置保持一致，我們可以使用webpack來進行一下打包，最後統一上傳oss存儲
首先需要安裝url-loader
npm i url-loader -D
然後我們在 webpack.common.js中進行配置
const path = require('path');
const webpack = require('webpack');
const {
CleanWebpackPlugin
} = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: [path.join(__dirname, './src/index.js')],
plugins: [
new CleanWebpackPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
title: 'Webpack init'
})
],
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
//靜態文件打包的網絡路徑
publicPath:'https://www.lookroot.cn/assets/'
},
module: {
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
//超過這個大小，圖片就打包為圖片，不超過就打包為base64格式的代碼
limit: 1000,
//打包文件名
name: "img/[hash].[ext]",
},
}
},
]
}
};
為了驗證，首先我們放一張圖片logo.jpg到src/asserts/img目錄下,我們簡單的修改一下app.css
.init {
color: red;
}
body {
background-image: url("../assets/img/logo.jpg");
background-repeat: no-repeat;
}
同樣的我們也可以在js代碼里使用圖片，修改一下divdoc.js
import logo from "../assets/img/logo.jpg";
export default function divdoc() {
... ...
// 插入一張圖片
let img = document.createElement('img');
img.src = logo;
element.appendChild(img);
... ...
}
然後使用npm run envdev運行起來，效果是正常的
然後我們使用npm run envbuild執行編譯，然後我們打開dist/img/main.css
body {
background-image: url(https://www.lookroot.cn/assets/img/494654d849ba012e2aab0505d7c82dc0.jpg);
background-repeat: no-repeat;
}
我們可以發現，webpack就給我們自動加上了網絡路徑，對於圖片的處理，還有可以優化圖片的[image-webpack-loader(https://github.com/tcoopman/image-webpack-loader)、可以自動生成雪碧圖的postcss-sprites
除了上面我說的這些資源外，webpack還支持非常多的資源格式，只要理解這個思想，使用也不難
代碼檢查和代碼轉換
Eslint代碼檢查
eslint是實際開發中非常常用的代碼檢查工具，我們在webpack中使用它來進行代碼檢查
首先安裝eslint、loader、錯誤格式化插件
npm i eslint eslint-loader eslint-friendly-formatter -D
然後我們在根目錄新建一個.eslintrc.json,當然你也可以使用命令npx eslint --init來初始化配置文件
rules代表規則，這裏我設置一個禁止使用 alert代碼來測試是否可以完成代碼檢查，更多規則請看文檔
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"rules": {
"no-alert": 2
}
}
然後在webpack.dev.js中增加配置
module: {
rules: [
... ...
{
test: /\.js$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [path.resolve(__dirname, 'src')],
options: {
formatter: require('eslint-friendly-formatter')
}
}
]
}
然後我們在 index.js文件中增加一句alert("webpack init"),然後使用命令npm run envdev發現報錯，eslint成功捕捉到了錯誤
同樣的你還可以使用 StyleLint工具來檢查你的css代碼
babel代碼轉化
在實際開發中如果使用了 es6+的代碼，有些瀏覽器是不支持的，為了兼容，所有需要將代碼進一步轉化，可以使用babel進行轉化
babel的使用稍微比較繁瑣，本文只介紹在webpack的使用方法，更多細緻的東西請自行查閱
安裝本體和loader babel-loader @babel/core， @babel/preset-env是轉換插件的預設組合，@babel/plugin-transform-runtime用來解決一些瀏覽器不支持的方法和對象問題
npm i @babel/runtime -S
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
然後我們在根目錄新建一個配置文件.babelrc，使用@babel/preset-env提供的插件集合能完成大部分的工作了,targets表示我們的代碼要運行到哪些平台上面，更為詳細的請點擊
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3,
"targets": {
"browsers": [ "ie >= 8", "chrome >= 62" ]
}
}
]
]
}
然後修改一下webpack.dev.js
module: {
rules: [
... ...
{
test: /\.js$/,
use: [{
loader: 'babel-loader',
}]
}
]
}
為了驗證代碼是否轉換成功，我們在index.js中添加代碼
const say=(msg)=>{
console.log(msg);
}
然後使用命令npm run envdev，並打開source map 查看源文件，可以發現箭頭函數已經被轉換了
本節的內容就是這些，下一次將會有個簡單的實戰，對於webpack還有很多要學習的地方，比如打包優化、插件編寫等等學完基礎以後，這些就需要你自己去探索
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!
※網頁設計公司推薦不同的風格，搶佔消費者視覺第一線
※Google地圖已可更新顯示潭子電動車充電站設置地點!!
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※別再煩惱如何寫文案,掌握八大原則!
為了推廣使用再生能源，舊金山政府及當地企業和電動車組織聯手推動 11th hour 計畫，在舊金山設立多個太陽能電動車充電站，暫時會有 3 個充電站供車主免費使用。 由 Envision Solar 設計和生產的太陽能充電站由擁有追蹤光源功能的太陽能板、儲電鋰電池和充電插頭組成。它的設計能夠抵禦時速超過 190 公里的強風，和儲存 22.5 kWh 的電力。只要選定好地點，然後進行太陽位置追蹤設定，Envision Solar 發電站就能夠運作。 它的 Level 2 充電接口能夠輸出 3.3 kW 電力，大約可為電動車提供 160 公里的行駛距離。 （圖片來源：）
特斯拉（Tesla）高調宣布鋰電池儲能系統，其中針對企業用戶的「Powerpack」，100 度電售價 25,000 美元，已將平均儲能成本拉低到相當驚人的每度電 250 美元，一般認為若平均儲能成本降到每度電 100 美元，將引爆能源儲存革命，特斯拉挾 GigaFactory 的威力，正全速逼近這個目標，不過，卻有一個小型新創事業，認為現在就可以做到。 這家新創事業 FreeWire 初期募資金額不過 42.5 萬美元，加上美國海軍資助 50 萬美元，如何能超越家大業大的特斯拉？其實原理也不難，就是採用二手電池。 FreeWire 、日產（Nissan）與 NEC 合資的汽車能源供應公司（Automotive Energy Supply Corporation，AESC）合作，AESC 是僅次於 Panasonic，全球第二大車用鋰電池供應商，市佔率達 21%，2014 年銷售最佳的電動車是 Nissan Leaf，其電池正是由 AESC 供應，Nissan 每個月都會測試電池，每六個月就汰換效能已經衰退的鋰電池，數量以千計，對 Nissan 來說庫存這些二線電池是個麻煩，但這些電池的效能或許已經不不敷電動車所需，拿來做為能源儲存用途卻還很有用。 於是，FreeWire 以新電池六分之一的價格取得這些二手電池，第一步，是取之於電動車用之於電動車，將這些二手電池組裝成總容量 48 度電的行動充電車，專供電動車在本來沒有設置充電座的停車場、機場、企業廠區等處充電，行動充電車可以推到停車場任何一個停車格，幫電動車充電，如此一來，停車場可以省下設置大量充電座的成本，卻能提供身為少數的電動車主充電服務，而這些二手電池在每天充放電循環 2 次的情況下，還可以有 5 年的壽命。 
