主頁 > 企業開發 > webpack的入門實踐，看這篇就夠了

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

2020-09-16 05:06:24 企業開發

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=https://www.cnblogs.com/lookroot/p/"./dist/main.js"></script>

<body>

然后修改一下打包命令,指定當前為開發模式，再次運行.\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 = https://www.cnblogs.com/lookroot/p/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還有很多要學習的地方，比如打包優化、插件撰寫等等學完基礎以后，這些就需要你自己去探索

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53651.html

標籤：JavaScript

上一篇：前端學習之路，前端開發人員如何在團隊中規范git commit提交記錄

下一篇：關與node-gpy

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂