1. 程式人生 > 其它 >FastAPI 學習之路(十)請求體的欄位

FastAPI 學習之路(十)請求體的欄位

一、介紹:

  1. js應用的模組打包工具

二、webpack安裝

  1. 環境:node環境

  2.npm install webpack -g

    說明:npm install 命令;webpack是工具名,可以指定版本如:[email protected]; -g表示全域性安裝,如果不想全域性安裝,僅為某專案安裝開發時依賴,可以在進入該專案目錄下執行安裝命令, 將-g改為--save-dev

    整體案例:npm install [email protected] --save-dev

  3.webpack --version

    說明:檢視webpack安裝版本,正確顯示說明安裝成功。注意:高版本webpack檢視版本時會讓安裝webpack腳手架(webpack-cli)

  4.npm uninstall webpack -g

    說明:移除webpack工具

三、webpack打包

  1. webpack 入口js檔案 打包後的js檔名

    說明:webpack是打包命令;入口檔案是專案的入口,如main.js;打包後的檔名是打包成功後輸出生成的檔名,如bundle.js

    整體案例:webpack ./src/main.js ./dist/bundle.js

  2. webpack

    說明:在webpack進行檔案配置之後,可以直接使用webpack打包,webpack會從配置中查詢入口檔案和出口檔案進行打包;檔名稱:webpack.config.js

      配置方式:

module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        // path必須為絕對路徑
        path: absolutePath,
        filename: 'bundle.js'        
    }
} 

      絕對路徑相對化:在專案目錄下執行npm init命令會生成package.json檔案,此時在webpack.config.js配置檔案中匯入path模組,此時就會從package.json或者全域性中查詢path包,使用包中的resolve函式拼接出path

      匯入模組:const path = require('path')

      拼接絕對路徑:path.resolve(__dirname, 'dist')

        其中 __ditname是node中獲取的當前專案的資料夾絕對路徑

  3.npm run ***

    說明:npm run 命令可以用來執行指令碼命令,在配置好對映之後便可以使用

      建立webpack打包對映:在package.json檔案中的scripts中新增命令對映:如 "build":"webpack"

      在建立好上述對映之後,就可以使用npm run build進行打包構建,執行的就是webpack命令,使用的是配置資訊

    此種打包方式會優先使用本地安裝的webpack

四、webpack擴充

  1. loader安裝

    通過npm安裝需要使用的loader;

  2. loader配置

    在webpack.confi.js中的module關鍵字下進行配置(去官網查詢相關loader和用法。webpack.js.org)

  3. 整體案例:一:npm install css-loader --save-dev; npm install style-loader --save-dev;

        二:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.css$/,
            use: ["style-loader", "css-loader"]
        }]
    }  
}

日期:2021-10-20