用 webpack 4.0 擼單頁/多頁腳手架 (jquery, react, vue, typescript)
1.導語
首先來簡單介紹一下webpack：現代 JavaScript 應用程序的靜態模塊打包工具。當 webpack 處理應用程序時，它會在內部構建一個會映射項目所需的每一個模塊 的依賴圖(dependency graph)，並生成一個或多個 bundle。webpack4.0出現以後，咱們能夠不用再引入一個配置文件來打包項目，而且它仍然有着很高的可配置性，能夠很好知足咱們的需求。 在開始正文以前，首先先來看看咱們要實現的成果：javascript
- 支持ES6+JQuery+Less/Scss的單頁/多頁腳手架
- 支持ES6+React+Less/Scss+Typescript的單頁/多頁腳手架
- 支持ES6+Vue+Less/Scss+Typescript的單頁/多頁腳手架
github地址：
基於webpack4.0搭建的腳手架（支持react/vue/typescript/es6+/jquery+less/scss)css
在腳手架的開發過程當中我會詳細介紹每一個插件或者loader的用途以及webpack的核心理念，若有不懂或者有其餘更好的想法歡迎交流。 下面是基於該文章的webpack4.0的思惟導圖：html
2.webpack核心概念
- 入口：指示 webpack 應該使用哪一個模塊做爲入口起點
- 輸出：告訴 webpack 在哪裏輸出它所建立的 bundle，以及如何命名這些文件
- loader：讓 webpack 可以去處理其餘類型的文件，並將它們轉換爲有效模塊，以供應用程序使用
- 插件：用於執行範圍更廣的任務。包括：打包優化，資源管理，注入環境變量
- 模式：經過選擇 development, production 或 none 之中的一個，來設置 mode 參數，從而進行不一樣的打包優化
- 瀏覽器兼容性：支持全部符合ES5 標準的瀏覽器（不支持 IE8 及如下版本） 下面提供官網的打包模型
3.支持ES6+JQuery+Less/Scss的單頁/多頁腳手架
在實現腳手架以前，假設咱們已經建立了目錄和package.json文件，接下來先安裝webpack相關依賴：前端
// 此處建議安裝局部依賴，安裝全局依賴可能會出現版本問題
npm install -D webpack webpack-cli
複製代碼
由於項目要支持es6+,咱們還須要安裝babel相關依賴：vue
npm install -D babel-loader @babel/core @babel/preset-env
複製代碼
這個時候能夠開始配置咱們的腳手架邏輯了，爲了項目結構清晰易於維護，咱們建一個build目錄專門放webpack構建的腳本，webpack默認的配置文件是webpack.config.js,因爲實際項目須要，咱們將其拆分爲3個文件，分別是webpack通用配置文件webpack.base.js，開發環境配置文件webpack.dev.js以及生產環境配置文件webpack.prod.js。 java
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/index.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
},
module: {
rules: [
// 將es6編譯成es5
{
test: /\.jsx?$/, // ?表示x有0個或一個
exclude: /node_modules/, // 不編譯某個目錄下的文件
include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
use: [
"babel-loader",
]
},
]
}
}
複製代碼
爲了項目後期的開發和維護，咱們創建好項目結構： node
public目錄是事先準備好的html模版，這裏就不介紹了，其餘目錄可根據具體項目進行設置。react
咱們還須要一個插件將打包後的文件植入到html模版中並導出到dist目錄下，這裏使用html-webpack-plugin來實現jquery
npm install -D html-webpack-plugin
複製代碼
如今webpack.base.js爲以下：webpack
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const template = path.resolve(__dirname, '../public/index.html');
module.exports = {
entry: {
main: './src/index.js'
},
output: {
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
// 將es6編譯成es5
{
test: /\.jsx?$/, // ?表示x有0個或一個
exclude: /node_modules/, // 不編譯某個目錄下的文件
include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
use: [
"babel-loader",
]
},
]
},
plugins: [
new HtmlWebpackPlugin({
template,
filename: 'index.html'
})
]
}
複製代碼
爲了打包項目，咱們須要在webpack.prod.js目錄下進行配置，此處須要一個模塊webpack-merge將wepack基礎配置合併進生產配置，咱們先來安裝一下：
npm install -D webpack-merge
複製代碼
webpack.prod.js配置以下：
const merge = require('webpack-merge');
const base = require('./webpack.base');
module.exports = merge({
mode: 'production',
output: {
filename: 'js/[name]_[contenthash].js', // 入口和內容hash組成的文件名，也能夠是hash
chunkFilename: 'js/[name]_[contenthash].chunk.js'
}
}, base)
複製代碼
而後在package.json裏添加執行腳本：
"scripts": {
"build": "webpack --config ./build/webpack.prod.js"
}
複製代碼
webpack默認會找名爲webpack.config.js的文件，因爲咱們將其拆解爲prod和dev，因此咱們要手動指定webpack執行的文件，添加--config，便可手動指定目錄。下面咱們開始寫一段代碼試試吧，在index.js中寫入以下es6代碼:
// index.js
let name = 'xuxi';
let say = (name) => {
alert(name)
};
say(name);
複製代碼
下面咱們執行：
npm run build
複製代碼
此時咱們會看見項目中多了一個dist目錄，裏面的html也植入了相應的代碼，
npm install --save-dev css-loader style-loader
複製代碼
在webpack.base.js中的module中添加以下代碼：
module: {
rules: [
// 將es6編譯成es5
{
test: /\.jsx?$/, // ?表示x有0個或一個
exclude: /node_modules/, // 不編譯某個目錄下的文件
include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
use: [
"babel-loader",
]
},
// 加載css
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
]
}
複製代碼
注意，laoder的加載順序是從下往上，從右往左的，因此配置loader的時候要注意一下順序。 此時在styles目錄下加入app.css,在js中引入:
// app.css
#root {
background-color: #f0c;
height: 100px;
}
// index.js
import './styles/app.css'
複製代碼
此時打開瀏覽器，能夠看到css生效了：
npm isntall mini-css-extract-plugin -D
複製代碼
根據該插件的官方配置，咱們須要把style-loader替換成該插件提供的loader，並配置導出的css文件目錄和文件名，爲了提升開發環境構建速度，咱們只在生產環境分割css：
// webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const base = require('./webpack.base');
module.exports = merge({
mode: 'production',
output: {
filename: 'js/[name]_[contenthash].js', // 入口和內容hash組成的文件名，也能夠是hash
chunkFilename: 'js/[name]_[contenthash].chunk.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [ // loader解析的順序是從下到上，從右到左的順序
{
loader: MiniCssExtractPlugin.loader,
options: {
filename: '[name].css',
chunkFilename: '[name].css',
publicPath: '../' //****最後打包的時候替換引入文件路徑
},
},
// 'style-loader', 使用MiniCssExtractPlugin時就不能使用style-loader了
{
loader: 'css-loader',
options: {
importLoaders: 2 //該方式可讓@import引入的css文件再次執行一邊css打包loader
}
},
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'css/[name]_[hash].css',
chunkFilename: 'css/[name]_[hash].chunk.css',
}),
]
}, base)
複製代碼
因爲咱們在dev和prod環境的css-loader不同，因此咱們將base的css-loader配置刪除，移到dev下
// webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');
module.exports = merge({
mode: 'development',
module: {
rules: [
{
test: /\.css$/,
use: [ // loader解析的順序是從下到上，從右到左的順序
'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
{
loader: 'css-loader',
options: {
importLoaders: 2 //該方式可讓@import引入的css文件再次執行一邊css打包loader
}
},
]
}
]
},
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}, base)
複製代碼
ok,此時咱們就完成一個基本的打包es6,css的模塊打包工具，爲了支持更高的es6+語法，咱們配置.babelrc文件，以及安裝相應的npm包：
npm install @babel/polyfill core-js -D
複製代碼
.babelrc文件以下：
{
"presets": [
[
"@babel/preset-env", // 將ES6語法轉換爲es5
{
"useBuiltIns": "usage", // 只編譯須要編譯的代碼
"corejs": "3.0.1",
}
],
]
}
複製代碼
咱們會看到babelrc文件裏面有"useBuiltIns": "usage", 這個配置涉及到一個關於webpack打包的高級用法，tree-shaking。
tree-shaking:用於描述移除 JavaScript 上下文中的未引用代碼(dead-code)。它依賴於 ES2015 模塊語法的 靜態結構 特性，例如
import和export。這個術語和概念其實是由 ES2015 模塊打包工具 rollup 普及起來的。
咱們經過使用tree-shaking，能夠極大的減小代碼的體積，對於提升打包性能頗有幫助。爲了使tree-shaking能生效，咱們還要在webpack配置文件中開啓：
// webpack.base.js
optimization: {
usedExports: true
}
複製代碼
還有一個問題，因爲tree-shaking是基於import 和export的，當咱們用import引入css文件時，是沒有導出的，因此咱們須要配置忽略css文件的tree-shaking，在package.json中添加以下配置：
// package.json
"sideEffects": [
"*.css",
"*.less"
],
複製代碼
在打包的過程當中，每次執行打包都會新建一個打包文件，咱們想要每次打包以前都清除上一次打包的文件怎麼辦呢？咱們可使用clean-webpack-plugin來實現，首先先安裝，而後具體配置以下：
// webpack.prod.js
plugins: [
new CleanWebpackPlugin()
],
複製代碼
該插件會默認清除dist目錄下的打包文件。 接下來咱們安裝jquery：
npm install jquery -S
複製代碼
在index.js引入並使用：
import $ from 'jquery';
import './styles/app.css'
console.log($('#root').html('hello world'));
複製代碼
執行npm run build後，咱們在瀏覽器中打開，便可看到jq的做用：
//webpack.base.js
optimization: {
splitChunks: {
chunks: 'all',
// chunks: 'async', // async表示只對異步代碼進行分割
minSize: 30000, // 當超過指定大小時作代碼分割
// maxSize: 200000, // 當大於最大尺寸時對代碼進行二次分割
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
automaticNameDelimiter: '_',
name: true,
cacheGroups: { // 緩存組：若是知足vendor的條件，就按vender打包，不然按default打包
vendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10, // 權重越大，打包優先級越高
// filename: 'js/vender.js' //將代碼打包成名爲vender.js的文件
name: 'vender'
},
default: {
minChunks: 2,
priority: -20,
name: 'common',
// filename: 'js/common.js',
reuseExistingChunk: true // 是否複用已經打包過的代碼
}
}
},
usedExports: true
}
複製代碼
因爲篇幅限制，splitChunks的具體配置我經過註釋寫出來了，若是想了解更詳細的配置，後面你們能夠去webpack官網查看。此時執行npm run build,咱們能夠看到代碼已經進行了分割：
npm install url-loader file-loader less less-loader
複製代碼
此時咱們webpack.base.js中module變爲：
module: {
rules: [
// 將es6編譯成es5
{
test: /\.jsx?$/, // ?表示x有0個或一個
exclude: /node_modules/, // 不編譯某個目錄下的文件
include: path.resolve(__dirname, '../src'), // 只在include包含的目錄下進行loader編譯
use: [
"babel-loader",
]
},
// 加載解析文件資源
{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader', // 和file-loader功能相同，但更智能
options: {
// 配置打包後的文件名,具體可看webpack的file-loader文檔
name: '[name].[ext]?[hash]',
outputPath: 'images/',
limit: 4096 // 當圖片大小大於4k時將以文件形式輸出，不然以base64輸出
}
}
},
// 引入字體，svg等文件
{
test: /\.(eot|ttf|svg)$/,
use: {
loader: 'file-loader'
}
}
]
},
複製代碼
爲了支持less，咱們修改一下dev和prod文件：
// webpack.dev.js
module: {
rules: [
{
test: /\.(css|less)$/,
use: [ // loader解析的順序是從下到上，從右到左的順序
'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
{
loader: 'css-loader',
options: {
importLoaders: 2 //該方式可讓@import引入的css文件再次執行一邊css打包loader
}
},
'less-loader',
]
}
]
}
// webpack.prod.js
module: {
rules: [
{
test: /\.(css|less)$/,
use: [ // loader解析的順序是從下到上，從右到左的順序
{
loader: MiniCssExtractPlugin.loader,
options: {
filename: '[name].css',
chunkFilename: '[name].css',
publicPath: '../' //****最後打包的時候替換引入文件路徑
},
},
{
loader: 'css-loader',
options: {
importLoaders: 2 //該方式可讓@import引入的css文件再次執行一邊css打包loader
}
},
'less-loader'
]
}
]
}
複製代碼
咱們寫一段less代碼試試：
body {
#root {
background-color: #000;
color: #fff;
}
}
複製代碼
咱們執行build以後在瀏覽器打開看看效果：
npm install webpack-dev-server -D
複製代碼
接着配置dev文件：
webpack.dev.js
const base = require('./webpack.base');
const merge = require('webpack-merge');
const webpack = require('webpack');
module.exports = merge({
mode: 'development',
module: {
rules: [
{
test: /\.(css|less)$/,
use: [ // loader解析的順序是從下到上，從右到左的順序
'style-loader', //使用MiniCssExtractPlugin時就不能使用style-loader了
'vue-style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2 //該方式可讓@import引入的css文件再次執行一邊css打包loader
}
},
// 'sass-loader',
'less-loader',
'postcss-loader',
]
}
]
},
// 服務器配置
devServer: {
port: '8081',
// 當使用 HTML5 History API 時，任意的 404 響應均可能須要被替代爲 index.html
historyApiFallback: true, // 解決單頁面路由問題，
contentBase: '../dist',
open: true, //自動打開瀏覽器
hot: true, // 開啓熱替換, css代碼跟新不刷新頁面
// hotOnly: true 開啓後只有手動配置才能更新，即便hot爲true也不刷新瀏覽器
proxy: {
index: '', // 將index設置爲空，能夠對根路徑進行轉發
'api/get': 'xxxx.com/api', // 第一種方式，直接代理到api路徑
'api/vue': { // 第二種方式，在路徑須要臨時替換時使用
target: 'xxxx.com/api',
pathRewrite: {
'head': 'demo' //此時訪問head路徑將被代理到demo下
},
secure: false, //對https請求的配置，false爲支持https
changeOrigin: true //作代理分發時容許訪問其餘網站，突破網站限制，建議在開發環境使用
},
}
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
output: {
filename: '[name].js',
chunkFilename: '[name].js',
}
}, base)
複製代碼
以上代碼中，要使用熱模塊替換，咱們須要用到webpack本身集成的插件webpack.HotModuleReplacementPlugin，在devServer中，咱們還能夠設置開發環境中的代理proxy，這已是目前開發的默認模式了，代碼中一些屬性的用法和含義我都作了註釋，若是你們有興趣，能夠查看webpack原版官方文檔，那裏有更詳細的配置信息。 咱們再來修改package.json,添加開發環境的運行指令：
// 在script裏面添加
"start": "webpack-dev-server --config ./build/webpack.dev.js",
複製代碼
咱們執行 npm start，此時會自動打開瀏覽器，運行咱們的項目。
到此，咱們基本的一個支持ES6+Less/css+JQuery的單頁應用打包工具已經作好了，固然這只是基礎，後面的多頁應用，vue/react/typescript都是在這個基礎上構建的，讓咱們拭目以待。
多頁面應用：
咱們開發多頁面應用仍是須要用到以前使用的html-webpack-plugin插件，此時咱們須要定義多個入口：
// webpack.base.js
entry: {
main: './src/index.js',
about: './src/about.js'
}
plugins: [
new HtmlWebpackPlugin(
{
template,
title: 'webpack打包但單應用',
chunks: ['vender', 'main']，
filename: 'index.html'
}
),
new HtmlWebpackPlugin(
{
template,
title: '關於咱們',
chunks: ['vender', 'about']，
filename: 'about.html'
}
),
]
複製代碼
template是咱們定義的public下的html路徑，title是咱們要植入html模版中的titl標籤中的內容，咱們在index.html中這麼使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="shortcut icon" href="./favicon.ico">
</head>
<body>
<div id="root"></div>
</body>
</html>
複製代碼
這樣，webpack配置的title就能夠動態的添加到html頁面中了，這裏我要說一下在new HtmlWebpackPlugin中咱們添加了chunks數組，這個數組就是咱們要打包進頁面的js，main和about分別表明入口的名字，vender就是咱們定義optimization時裏面cacheGroups屬性值中vendors中定義的name,當代碼超過30000b時就會生成vender.js文件。 此時咱們執行npm run build，打包結束後將會生成2個html頁面，對應的文件依賴也會引入，在瀏覽器中打開，親測有效～
這樣，一個基本的多頁面打包工具就開發完成了，不過還有幾點優化：
- 代碼壓縮，
- 第三方模塊懶編譯，咱們可使用webpack提供的dll技術作優化
- pwa技術引入 下面分別是相關實現： 1.代碼壓縮，咱們使用terser-webpack-plugin壓縮js，用optimize-css-assets-webpack-plugin壓縮css
npm install terser-webpack-plugin optimize-css-assets-webpack-plugin -D
複製代碼
咱們在webpack.prod.js中添加一下配置：
// 導入模塊
// 壓縮css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 壓縮js
const TerserPlugin = require('terser-webpack-plugin');
// 配置module.exports,添加配置以下
optimization: {
minimizer: [
new TerserPlugin({ // 壓縮js代碼
cache: true, // 啓用文件緩存
parallel: true, // 使用多進程並行執行任務來提升構建效率
sourceMap: true, // 將錯誤消息位置映射到模塊
terserOptions: {
drop_console: true, // 打包時剔除全部console.log
drop_debugger: true // 打包時剔除全部debugger
}
}),
new OptimizeCSSAssetsPlugin({})] // 壓縮css代碼
},
複製代碼
- pwa：漸進式網絡應用程序(progressive web application - PWA)，是一種能夠提供相似於native app(原生應用程序) 體驗的 web app(網絡應用程序)。首先咱們安裝依賴：
npm install workbox-webpack-plugin --save-dev
複製代碼
在須要作pwa的頁面里加入以下腳本啓動：
if ('serviceWorker' in navigator) { window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('SW registered: ', registration);
}).catch(registrationError => {
console.log('SW registration failed: ', registrationError);
});
});
}
複製代碼
- dll文件優化打包速度 關於dll問題，咱們能夠在官網上查詢具體的使用方法，這裏就不具體說明了。
至此，咱們關於開發基於ES6+JQuery+Less/Scss的單頁/多頁腳手架就告於段落了，下面咱們來集成對react/vue/typescript的支持。
1.支持react
咱們首先安裝一個babel模塊：
npm install --save-dev @babel/preset-react
複製代碼
而後在.babelrc中加入以下配置：
{
"presets": [
[
"@babel/preset-react",
{
"pragma": "dom", // default pragma is React.createElement
"pragmaFrag": "DomFrag", // default is React.Fragment
"throwIfNamespace": false // defaults to true
}
]
]
}
複製代碼
而後在index.js中寫入一段react代碼：
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
render() {
return <div>react frame content.</div>
}
}
ReactDOM.render(<App />, document.getElementById('root')); 複製代碼
打包後便可在瀏覽器中看到效果。
2.支持vue
首先先安裝對應npm包：
npm install -D vue-loader vue-template-compiler
複製代碼
以後在webpack的配置文件中寫入以下代碼：
// webpack.base.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... other rules
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// make sure to include the plugin!
new VueLoaderPlugin()
]
}
複製代碼
若是要想解析.vue文件中的style，咱們須要使用vue-style-loader模塊，安裝以後將其添加到loder中便可。 接下來咱們寫個簡單的vue試一下吧：
<template>
<div class="example"> {{ msg }} <img src="~/images/logo.png" /> <img :src="imgSrc" /> </div> </template> <script> import Logo from 'images/logo.png'; import 'css/common.css'; export default { data () { return { msg: 'Hello world!單獨的', imgSrc: Logo } } } </script> <style lang="less"> .example { color: red; img { border: 2px solid #000; } } </style> 複製代碼
運行dev在瀏覽器中便可看到效果。 值得注意的是vue文件中引入資源的問題，使用相對路徑會有問題，這裏咱們可使用~/images/logo.png的方式或者require的方式來引入圖片。
3.支持typescript
這裏咱們使用awesome-typescript-loader來編譯typescript文件，也是官方推薦的一個加載器：
npm install awesome-typescript-loader --save-dev
複製代碼
而後咱們在webpack的配置文件base中，在module的rules里加入以下代碼：
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader'
}
複製代碼
最後一步，添加tsconfig.json文件：
{
"compilerOptions": {
"noImplicitAny": true,
"removeComments": true
},
"awesomeTypescriptLoaderOptions": {
/* ... */
}
}
複製代碼
該文件有不少靈活的配置項，你們若是想了解更多能夠去typescript官網上查看相關文檔。 至此，全部的配置都完成了，是否是很累？哈哈，固然腳手架中還存在一些優化的地方，歡迎你們能夠一塊兒完善。
未完成的優化點：
- vue文件內部style沒法獨立抽出樣式，只能經過引入css文件的方式加載樣式
- 公用css文件問題：多頁面打包時，若是都引入了同一個css，沒法服用這個css，但願能將這個css文件做爲一個公共模塊單獨引用
最後，歡迎加入前端技術羣，一塊兒探討前端的魅力：
更多推薦
- 1. Vue或React多頁應用腳手架
- 2. React + TypeScript 搭建多Tab頁腳手架
- 3. Vue多頁應用腳手架
- 4. React多頁面應用腳手架-v1.3.0
- 5. Vue cli3 通用多頁面腳手架
- 6. 開箱即用的多頁面webpack腳手架
- 7. vue腳手架改爲vue多頁面
- 8. 基於webpack4的VUE多頁腳手架
- 9. webpack4的單頁多頁自助腳手架
- 10. webpack4.0 多頁面腳手架
- 更多相關文章...
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • jQuery Mobile 頁面事件 - jQuery Mobile 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Window下Ribbit MQ安裝
- 2. Linux下Redis安裝及集羣搭建
- 3. shiny搭建網站填坑戰略
- 4. Mysql8.0.22安裝與配置詳細教程
- 5. Hadoop安裝及配置
- 6. Python爬蟲初學筆記
- 7. 部署LVS-Keepalived高可用集羣
- 8. keepalived+mysql高可用集羣
- 9. jenkins 公鑰配置
- 10. HA實用詳解