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