webpack4.X 實戰（二）：從0開始搭建一個 簡單的前端項目

時間  2019-11-06
標籤 webpack4.x webpack 實戰 開始 搭建 一個 簡單 前端 項目 简体版
原文   原文鏈接

1、項目說明

  • 這是一個 極簡的前端項目，適合新手入門，簡述以下（有詳細說明）node

    • 啓動本地服務 webpack-dev-serverwebpack

    • 處理資源路徑css3

    • 處理 css、scss、lessgit

    • css3 屬性前綴github

    • 分離css、壓縮分離後的css、淨化分離後的cssweb

    • babel轉換（babel7.X）npm

2、項目初始化

  • 新建項目根目錄 文件夾 webpack_demo_basic

  • 進入終端執行 npm init -y

    生成 package.json 文件，以下

  • 初始化項目文件，目錄以下

    src/css/index.css 文件：css樣式文件

    src/less/less 文件：less樣式文件

    src/scss/index.scss 文件：scss樣式文件

    src/index.html 文件：項目html

    src/index.js 文件：項目入口js

    .babelrc 文件：項目babel配置文件

    .gitignore 文件：git忽略配置文件（使用 Git 版本控制時，須要配置）

    package.json 文件：定義了項目所需的模塊，以及項目的配置信息

    webpack.config.js 文件：webpack配置文件

  • 安裝 webpack依賴

    npm i webpack@4.28.3  webpack-cli@3.2.0  -D 
複製代碼

  • webpack 基礎配置

    // webpack.config.js 文件

const path = require('path');


module.exports = {
    mode: 'development',        // 開發模式

    entry: './src/index.js',    // 打包後輸出的文件名 爲 main.js
    /**
     * 或
     * 
     * entry: {
     *    index: './src/index.js'
     * }
    */

    output: {
        path: path.resolve(__dirname, 'dist'),  // 打包後項目 輸出到項目根目錄下 dist 文件夾 
        filename: '[name].js'                   // 輸出的 入口JS文件名稱
    },
    
    // loader 相關配置
    module: {
        rules: []
    },

    // 插件 相關配置
    plugins: []
};
複製代碼

3、配置/生成 頁面 html

  • 插件：html-webpack-plugin

    根據模板 生成頁面html

    自動引入 JS 等外部資源文件

    設置 title 、mate 等標籤內容

    優化html（壓縮、緩存、轉換等）

  • 安裝

    npm i html-webpack-plugin@3.2.0 -D
複製代碼

  • 配置

    // webpack.config.js 文件
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',         // 文件名; 默認是index.html
            template: './src/index.html',   // 指定模板html文件

            title: '11111',                 // html文件 title標籤的內容
            inject: true,                   // 自動引入JS腳本的位置，默認值爲 true（一般默認值便可知足條件）
            /*
             * 此選項有以下四種值:
             *
             * true/'body': JS腳本在 body標籤底部 引入
             * 'head': JS腳本在 bead標籤底部 引入
             * false: 不插入任何JS（幾乎不會用到）
            */


            // 以下 一般在生產模式下 才配置
            hash: true,                     // 默認值爲false, 值爲true時，html 引入的腳本、scss都加hash值（清除緩存）
                                            // 建議 生產環境下 設置爲 true
            cache: true,                    // 默認值爲true, 設置緩存
                                            // 建議 生產環境下 設置爲 true
            minify: {                       // 建議 生產環境下 再配置此選項
                minifycss: true,            // 壓縮css
                minifyJS: true,             // 壓縮JS            
                minifyURLs: true,           // 壓縮URL
                removeComments: true,               // 去掉註釋
                removeAttributeQuotes: true,        // 去掉標籤上 屬性的雙引號
                collapseWhitespace: true,           // 去掉空行
                removeRedundantAttributes: true,    // 去掉多餘的屬性
                removeEmptyAttributes: true         // 去掉空屬性
            }
        })
    ]
};
複製代碼

  • 配置說明

4、配置 本地服務

  • 服務器：webpack-dev-server

    一個小型的 Node.js Express服務器，程序開發時 本地運行項目

  • 安裝

    npm i webpack-dev-server@3.1.14 -D
複製代碼

  • 配置

    // webpack.config.js 文件

const path = require('path');

module.exports = {
    devServer:{
        index: 'index.html',    // 服務器啓動的頁面（同 html-webpack-plugin 中 filename 選項）; 默認值爲 index.html
        port: 3000,             // 指定端口號; 默認 8080
        host: 'localhost',      // 指定host; 默認 localhost
        
        /*
        *   或 
        *   host: '0.0.0.0',        // 可 經過IP 訪問，也能夠經過 localhost 訪問
        *   useLocalIp: true,       // browser open with your local IP
        */

        
        open: true,             // 啓動本地服務後，自動打開頁面
        compress: true,         // 是否啓用 gzip 壓縮
        overlay: true,          // 編譯器錯誤或警告時, 在瀏覽器中顯示全屏覆蓋; 默認false
        progress: true,         // 是否將運行進度輸出到控制檯; 默認 false

        contentBase: path.resolve(__dirname, 'dist'),  // 告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才須要

        // 精簡 終端輸出（本地運行時）
        stats: {
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }
    }
};
複製代碼

  • 配置說明

    • webpack-dev-server 詳細配置

    • 支持熱更新：檢測到項目中修改的代碼，當即在瀏覽器中自動更新

      新手需知道：熱更新僅限於項目代碼；webpack 相關的配置不會參與熱更新

    • 精簡終端輸出

      • 關於 精簡終端輸出 詳細講解見以後的文章

      • 小夥伴們能夠對比下，本地運行項目時，有無 stats 選項，終端輸出的變化

    • 熱替換

      • 場景：建議開發環境下使用

      • 好處：局部加載 頁面有改動的地方；加快開發編譯速度

      • 關於 熱替換 詳細講解見以後的文章

5、配置 npm script

  • 在 package.json 中配置相關指令，實現 本地運行、打包項目

    終端執行 npm run xxx，就會執行 package.json 裏script對應的 xxx 指令

  • 本地啓動項目

    • 指令配置

      // packgae.json 文件

{
  "scripts": {
    "dev": "webpack-dev-server"
  }
}
複製代碼

    • 說明

      • --progress、--open
      {
    "scripts": {
    "dev": "webpack-dev-server --progress --open"
    }
}


// --progress 表明: 本地啓動項目終端顯示進度
// --open 表明: 運行後瀏覽器自動打開頁面
// 這兩個和 webpack-dev-server 服務器的配置選項 progress、open 達到的效果一致，無需重複配置
複製代碼
      • --config
      {
    "scripts": {
        "dev": "webpack-dev-server --config webpack/config.js"
    }
}

// "dev": "webpack-dev-server"` 默認去找 根目錄下名爲 `webpack.config.js` 的webpack配置文件，進行打包、運行
// 若是有場景要自定義 webpack 配置文件名稱/路徑，可使用 --config 指定 webpack 配置文件，如上
複製代碼

    • 項目根目錄下，終端執行 npm run dev 便可本地運行項目

      瀏覽地址 http://localhost:3000/

  • 打包項目

    • 指令配置
    // packgae.json

{
  "scripts": {
    "build": "webpack"
  }
}
複製代碼

    • 說明

      • 如上打包會按照 webpack4.X 默認打包機制 進行打包

      • 後續文章會講解 如何自定義打包

    • 項目根目錄下，終端執行 npm run build 便可打包項目，輸出到 根目錄的 dist 文件夾

6、配置 資源路徑

1. 解決 項目 中的路徑問題

  • loader：url-loader、file-loader

    解決項目中的路徑問題（不限於 css）

    讓 webpack 識別 圖片、視頻、字體 等資源文件

  • url-loader 是 file-loader 的一個超集

    低版本的 url-loader 中封裝了 file-loader，url-loader 的運行 不會依賴file-loader

    高版本的 url-loader 在使用時，須要額外安裝 file-loader

  • url-loader 的 file-loader 區別

    • url-loader

      解決項目中的路徑問題

      將 小體積的資源 轉成 base64

      讓 webpack 識別 資源文件

    • file-loader

      解決項目中的路徑問題

      讓 webpack 識別 資源文件

  • file-loader 原理淺析

    衆所周知，webpack 會將各個模塊打包成一個文件，最終咱們樣式中的 url 路徑是相對入口html頁面的，而不是相對於原始css文件所在的路徑，這就會致使圖片引入失敗

    file-loader能夠解析項目中的url（不限於css），會根據配置 將圖片拷貝到相應的路徑，打包時會根據規則修改引入路徑

  • 安裝

    npm i url-loader@1.1.2  file-loader@3.0.1  -D
複製代碼

  • 配置

    // webpack.config.js 文件

module.exports = {
    module: {
        rules: [{
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,     // 文件體積小於 8192kb 時，將被轉爲 base64 資源
                    name: '[name].[ext]',
                    outputPath: 'static/assets/'    // 資源 輸出路徑
                }
            }]
        }, {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/'    // 資源 輸出路徑
                }
            }]
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/'    // 資源 輸出路徑
                }
            }]
        }]
    }
};
複製代碼

  • 說明

    • url-loader 詳細配置

    • 以配置中 options.outputPath 爲例，資源將被輸出到 根目錄下 static/assets 文件夾中

2. 解決 html 中的路徑問題

  • loader：html-withimg-loader

    解決 html 中的路徑問題，如 img 標籤的路徑問題

    webpack 建議全部圖片都使用背景圖的方式，因此默認狀況下 在html中使用 img 標籤，會顯示路徑錯誤

  • 安裝

    npm i html-withimg-loader@0.1.16 -D
複製代碼

  • 配置

    // webpack.config.js 文件

module.exports = {
    module: {
        rules: [{
            test: /\.(htm|html)$/,
             use:[{
                loader: 'html-withimg-loader'
             }] 
        }]
    }
};
複製代碼

7、配置 css相關

1. 識別 css

  • loader: css-loader style-loader

    webpack 默認只識別JS文件，要解析打包css 必須安裝相應的loader

  • 安裝

    npm i style-loader@0.23.1 css-loader@2.1.0 -D
複製代碼

  • 配置

    // webpack.config.js 文件
    
module.exports = {
    module: {
        rules: [{
            test:/\.css$/,
            use: ['style-loader','css-loader'] 
        }]
    }
};
複製代碼

2. 識別 scss

  • loader 相關: sass-loader、node-sass

    做爲css預編譯語言，須要 相應的loader進行解析

  • 安裝

    npm i node-sass@4.11.0  sass-loader@7.1.0  -D
複製代碼

  • 配置

    // webpack.config.js 文件
    
module.exports = {
    module: {
        relus: [{
            test: /\.scss$/,
            use: ['style-loader','css-loader','sass-loader'] // 編譯順序從右往左
        }]
    }
};
複製代碼

3. 識別 less

  • loader 相關: less-loader、less

    做爲css預編譯語言，須要 相應的loader進行解析

  • 安裝

    npm i less@3.9.0  less-loader@4.1.0  -D
複製代碼

  • 配置

    // webpack.config.js 文件
    
module.exports = {
    module: {
        relus: [{
            test: /\.less$/,
            use: ['style-loader','css-loader','less-loader'] // 編譯順序從右往左
        }]
    }
};
複製代碼

4. 自動添加 css3屬性前綴

  • loader 相關: postcss-loader、autoprefixer

    針對css3新增的屬性，並非全部瀏覽器都支持

    爲兼容不一樣內核的瀏覽器，增長屬性前綴（與內核相對應）-webkit, -ms, -o, -moz

  • 安裝

    npm i postcss-loader@3.0.0  autoprefixer@9.4.4 -D
複製代碼

  • 配置

    // 項目根目錄新建 文件postcss.config.js，其中配置以下

module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
};
複製代碼
    // webpack.config.js 文件
// 給 css文件 中的css3屬性自動 加屬性前綴


module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader', 'postcss-loader']
        }]
    }
};
複製代碼
    // webpack.config.js 文件
// 給 scss文件 中的css3屬性自動 加屬性前綴


module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] // 編譯順序從右往左
        }]
    }
};
複製代碼
    // webpack.config.js 文件
// 給 css文件 中的less屬性自動 加屬性前綴


module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] // 編譯順序從右往左
        }]
    }
};
複製代碼

5. 分離 css

  • 插件：mini-css-extract-plugin

    webpack 認爲css應該被打包到JS中，以減小HTTP請求次數

    但有的開發團隊，要求 抽離css單獨打包

  • 安裝

    npm i mini-css-extract-plugin@0.5.0 -D
複製代碼

  • 配置

    // webpack.config.js 文件，抽離css


const MinicssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [{
            test: /\.css$/,
            use: [MinicssExtractPlugin.loader, 'css-loader']
        }]
    },
    
    plugins: [
        new MinicssExtractPlugin({
            filename: "static/css/[name].[hash:7].css"
        })
    ]
}
複製代碼
    // webpack.config.js 文件，抽離scss


const MinicssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: [MinicssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }]
    },
    
    plugins: [
        // 添加一處便可
        new MinicssExtractPlugin({
            filename: "static/css/[name].[hash:7].css"
        })
    ]
}
複製代碼
    // webpack.config.js 文件，抽離less


const MinicssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    module: {
        rules: [{
            test: /\.less$/,
            use: [MinicssExtractPlugin.loader, 'css-loader', 'less-loader']
        }]
    },
    
    plugins: [
        // 添加一處便可
        new MinicssExtractPlugin({
            filename: "static/css/[name].[hash:7].css"
        })
    ]
}
複製代碼

  • 解決 css抽離後致使的路徑問題

    很容易將 css抽離出來，可是抽離出來的css中屬性 引用路徑並不對（緣由淺析：打包後分離出來的css 和 html 不在同一級目錄下）

    解決方案：配置資源文件的輸出路徑（相對路徑 改爲 絕對路徑）

    // webpack.config.js 配置文件


let publicPath = '';
const isProduction = false; // 是不是生產環境

if (!isProduction) {
    publicPath = 'http://localhost:3000/static/assets';
} else {
    // 將 publicPath 設置爲線上發佈地址
}


module.exports = {
    // loader 相關配置
    module: {
        rules: [{
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,                    // 文件體積小於 8192kb 時，將被轉爲 base64 資源
                    name: '[name].[ext]',
                    outputPath: 'static/assets/',   // 資源 輸出路徑
                    publicPath
                }
            }]
        }, {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/',    // 資源 輸出路徑
                    publicPath
                }
            }]
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/',    // 資源 輸出路徑
                    publicPath
                }
            }]
        }]
    }
};

複製代碼

6. 壓縮 分離後的css

  • 插件：optimize-css-assets-webpack-plugin

    即便是生產模式下，分離後的css不會被壓縮

    使用此插件對css進行壓縮處理

  • 安裝

    npm i optimize-css-assets-webpack-plugin@5.0.1 -D
複製代碼

  • 配置

    // webpack.config.js 文件

const Optimizecss = require('optimize-css-assets-webpack-plugin');


module.exports = {
    plugins: [
        new Optimizecss()
    ]
}
複製代碼

7. 淨化 分離後的css

  • 插件：purifycss-webpack、purify-css

    對於頁面中沒有使用到的css，打包時能夠經過此插件進行清除

    限制：僅限於 清除分離後的css文件中 無用的樣式

  • 安裝

    npm i purifycss-webpack@0.7.0  purify-css@1.2.5 -D
複製代碼

  • 配置

    // webpack.config.js 文件
const glob = require('glob');
const PurifycssPlugin = require("purifycss-webpack");


module.exports = {
    plugins: [
        new PurifycssPlugin({           
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
    ]
};
複製代碼

8、配置 JS相關

1. babel 轉換

  • 概述

    • 瀏覽器對 JavaScript 新語法、API、擴展語言的識別能力不一樣

    • babel 就是 JavaScript 語法編譯器 之一

      • 主要將 ECMAScript 2015+ 的JS代碼轉換成 低版本瀏覽器可識別的 JS 代碼

      • 將 JSX、TypeScript 等JS擴展語言 轉換成 瀏覽器可識別的原生 JS

  • 安裝

    npm i babel-loader@8.0.5  @babel/core@7.2.2  @babel/preset-env@7.2.3  @babel/plugin-transform-runtime@7.2.0  @babel/runtime@7.2.0  babel-plugin-transform-remove-console@6.9.4  @babel/plugin-syntax-dynamic-import@7.2.0 -D
複製代碼

  • 配置

    下面是 babel 7+ | babel-loader 8+ 的相關配置

    • 方式一：將 babel 的配置項抽離到 .babelrc 文件中（推薦）

      // webpack.config.js 文件
const path = require('path');


module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: ['babel-loader'],
            exclude: /node_modules/, // 排除不要加載的文件夾
            include: path.resolve(__dirname, 'src') // 指定須要加載的文件夾
        }]
    }
};
複製代碼
      // .babelrc 文件中 配置

{
    "presets": [
        [
            "@babel/preset-env",            // 根據 preset-env 標準進行轉換
            {
                "modules": false            // 不轉換模塊類型
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",  // 來處理全局函數和優化babel編譯
        "transform-remove-console"          // 打包時 移除 console 相關（開發環境下 不須要配置）
    ],
    "comments": false                       // 打包時 移除腳本中的註釋 
}
複製代碼

    • 方式二：直接在 webpack 配置項中 配置（不推薦）

      // webpack.config.js 文件
const path = require('path');
    

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    {
                        presets: [
                            [
                                "@babel/preset-env",            // 根據 preset-env 標準進行轉換
                                {
                                    "modules": false            // 不轉換模塊類型
                                }
                            ]
                        ],
                        plugins: [
                            "@babel/plugin-transform-runtime",  // 來處理全局函數和優化babel編譯
                            "transform-remove-console"          // 打包時 移除 console 相關
                        ],
                        comments: false                       // 打包時 移除腳本中的註釋 
                    }
                }
            }],
            exclude: /node_modules/,                // 排除不要加載的文件夾
            include: path.resolve(__dirname, 'src') // 指定須要加載的文件夾
        }]
    }
};
複製代碼

  • 說明

2. 壓縮 JS

9、webpack 配置文件

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MinicssExtractPlugin = require("mini-css-extract-plugin");
const Optimizecss = require('optimize-css-assets-webpack-plugin');
const glob = require('glob');
const PurifycssPlugin = require("purifycss-webpack");



let publicPath = '';
const isProduction = false; // 是不是生產環境

if (!isProduction) {
    publicPath = 'http://localhost:3000/static/assets';
} else {
    // 將 publicPath 設置爲線上發佈地址
}


module.exports = {
    mode: 'development',

    entry: {
        index: './src/index.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'), // 打包後項目 輸出到項目根目錄下 dist 文件夾 
        filename: '[name].js'                  // 輸出的 入口JS文件名稱
    },

    // loader 相關配置
    module: {
        rules: [{
            test: /\.(htm|html)$/,
             use:[{
                loader: 'html-withimg-loader'
             }] 
        }, {
            test: /\.css$/,
            use: [MinicssExtractPlugin.loader, 'css-loader']
        }, {
            test: /\.scss$/,
            use: [MinicssExtractPlugin.loader, 'css-loader', 'sass-loader']
        }, {
            test: /\.less$/,
            use: [MinicssExtractPlugin.loader, 'css-loader', 'less-loader']
        }, {
            test: /\.js$/,
            use: ['babel-loader'],
            exclude: /node_modules/,                // 排除不要加載的文件夾
            include: path.resolve(__dirname, 'src') // 指定須要加載的文件夾
        }, {
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8192,                    // 文件體積小於 8192kb 時，將被轉爲 base64 資源
                    name: '[name].[ext]',
                    outputPath: 'static/assets/',
                    publicPath
                }
            }]
        }, {
            test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/'    // 資源 輸出路徑
                }
            }]
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            use: [{
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'static/assets/'    // 資源 輸出路徑
                }
            }]
        }]
    },

    // 插件 相關配置
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',         // 文件名; 默認是index.html
            template: './src/index.html'    // 指定模板html文件
        }),

        // 分離 css
        new MinicssExtractPlugin({
            filename: "static/css/[name].[hash:7].css"
        }),

        // 壓縮分離後的 css
        new Optimizecss(),

        // 淨化 css
        new PurifycssPlugin({           
            paths: glob.sync(path.join(__dirname, 'src/*.html')),
        })
    ],

    devServer:{
        index: 'index.html',    // 服務器啓動的頁面（同 html-webpack-plugin 中 filename 選項）; 默認值爲 index.html
        host: 'localhost',      // 指定host; 默認 localhost
        port: 3000,             // 指定端口號; 默認 8080

        open: true,             // 啓動本地服務後，自動打開頁面
        compress: true,         // 是否啓用 gzip 壓縮
        overlay: true,          // 編譯器錯誤或警告時, 在瀏覽器中顯示全屏覆蓋; 默認false
        progress: true,         // 是否將運行進度輸出到控制檯; 默認 false

        contentBase: path.resolve(__dirname, 'dist'),  // 告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才須要

        // 精簡 終端輸出（本地運行時）
        stats: {
            modules: false,
            children: false,
            chunks: false,
            chunkModules: false
        }
    }
};
複製代碼

附言

  • 小夥伴們，有什麼問題 能夠留言，一塊兒交流哈

  • 接下來，我還會發布幾篇 webpack4.X 實戰文章，敬請關注

  • 我是一名熱衷於編程的前端開發，WX：ZXvictory66

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程