webpack的入門實踐，看這篇就夠了

来源:https://www.cnblogs.com/lookroot/archive/2020/06/28/13204348.html
-Advertisement-
Play Games

webpack的入門實踐 我會將所有的讀者概括為初學者，即使你可能有基礎，學習本節之前我希望你具有一定的JavaScript和node基礎 文中的 ... ...代表省略掉部分代碼，和上面的代碼相同 文中的文件夾如果沒有說創建，並且項目預設沒有的是需要你手動增加的 不會特別細緻，但是足夠入門 資源 ...


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

image-20200619164043421

快速入門

註意本文都是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命令

image-20200615221322815

註意此時命令行爆黃色警告，這是沒有指定當前模式的原因，並且可以發現，目錄下多了一個 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控制台查看結果

image-20200615223249379

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，接著在控制台查看錯誤並點擊，便能跳轉到出錯的位置

image-20200617182636377

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便可自動創建一個伺服器，並將項目運行在其中，當我們修改文件中的任意內容的時候，頁面便會自動刷新

image-20200616123613821

如果使用過 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文件中內容，發現控制台只列印了

image-20200616132338239

我們再次修改clg.js中內容，打個空格再保存即可，此時驗證了我們想要的效果

image-20200616132446364

生產環境和開發環境分離

開發環境(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查看效果

image-20200616142734988

接下來我們新建 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';

image-20200616143150738

順便可以打包一下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運行起來，效果是正常的

image-20200618213316699

然後我們使用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成功捕捉到了錯誤

image-20200619111756392

同樣的你還可以使用 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 查看源文件，可以發現箭頭函數已經被轉換了

image-20200619133641448

本節的內容就是這些，下一次將會有個簡單的實戰，對於webpack還有很多要學習的地方，比如打包優化、插件編寫等等學完基礎以後，這些就需要你自己去探索


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS的http/https請求——十分鐘學會Charles抓包
    Charles安裝 HTTP抓包 HTTPS抓包 1. Charles安裝 官網下載安裝Charles: https://www.charlesproxy.com/download/ 2. HTTP抓包 （1）查看電腦IP地址 （2）設置手機HTTP代理 手機連上電腦，點擊“設置->無線區域網->連 ...
  • iOS小技巧總結，絕對有你想要的（持續更新）
    最近在這裡總結一些iOS開發中的小技巧，能大大方便我們的開發。 UITableView的Group樣式下頂部空白處理 //分組列表頭部空白處理 UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, 0.1)]; self.t ...
  • 前端知識
    前端知識 web服務的本質： 基於B/S網路架構，瀏覽器和服務端的交互 瀏覽器發送請求，服務端接收請求，服務端響應請求，服務端吧HTML文件內容發給瀏覽器，瀏覽器渲染頁面 發送請求通過OSI網路七層模型：應用層，表示層，會話層，傳輸層，網路層，數據鏈路層，物理層 一、HTML介紹 html是超文本標 ...
  • 前端進階筆記之核心基礎知識---那些HTML標簽你熟悉嗎？
    提到HTML標簽，我們會非常熟悉，開發中經常使用。但我們往往關註更多的是頁面渲染效果及交互邏輯，也就是對用戶可見可操作的部分，比如表單、菜單欄、列表、圖文等。其實還有一些非常重要卻容易忽視的標簽，這些標簽大多數用在頁面頭部head標簽內，雖然對用戶不可見，但如果在某些場景下，比如交互實現、性能優化、 ...
  • 基礎複習1
    基礎回顧1 查找元素位置 題目描述：找出元素 item 在給定數組 arr 中的位置 輸出描述： 如果數組中存在 item，則返回元素在數組中的位置，否則返回 -1 function indexOf(arr, item) { if(Array.prototype.indexOf) return ar ...
  • 還在迷茫於前端如何入門和進階？萬字指南讓你不再迷茫！
    我經常會看到很多同學在學習前端的時候比較迷茫，不知道到底應該以怎樣的學習路線來入門和進階前端領域。每次遇到這種問題我也會分享一下自己的學習經驗，但是發現這是一個問得非常多的一個共性問題。 作為程式員，肯定是不能容忍重覆無味的勞動的，因此我就系統地總結分享一下我的前端學習路線，希望對你能夠有所幫助。 ...
  • 關與node-gpy
    事情是這樣的，今天安裝 prepack-webpack-plugin 出現了 node-pre-gyp WARN Using request for node-pre-gyp https download ,導致一直安裝不上，然後我就去找了 node-gpy 是啥，結果發現，它是和二進位編譯相關的， ...
  • 基於jQuery的打字機函數
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類