P22 知識(shí)點(diǎn) url-laoder的limit選項(xiàng)

在配置類中的module的rules的test轉(zhuǎn)換圖片的loader中l(wèi)imit代表只有<=大小的圖片才會(huì)被轉(zhuǎn)成base64格式的圖片 loader后面帶問號(hào)？單位是字節(jié)（baye）

P23知識(shí)點(diǎn) 高級(jí)語(yǔ)法

新名詞：@info 裝飾器

功能：可以為目標(biāo)添加靜態(tài)屬性（有點(diǎn)類似java中的繼承）

在文檔中有波浪線可能是警告

??????裝飾器運(yùn)行需要安裝對(duì)應(yīng)的依賴包

? ? ?npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在配置類中加一條

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}

exclude：排除那個(gè)路徑 第三方包node_modules的js兼容性不需要你來弄

在項(xiàng)目根目錄新增babel.config.js

在新增的js增加 （記得保存）意思為聲明插件

module.exports={

? ? Plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]

}

運(yùn)行成功

P23?在第二題中出現(xiàn)BUG

經(jīng)過我仔細(xì)研究后發(fā)現(xiàn)?babel.config.js 中括號(hào)寫錯(cuò)了?

易錯(cuò)的地方 ： 中文標(biāo)點(diǎn)符號(hào)，在寫新配置后沒寫逗號(hào)?

P24知識(shí)點(diǎn) 打包

在json中增加

"build":"webpack --mode production"

在build中的mode后面 會(huì)重寫 配置中的 mode

P25知識(shí)點(diǎn) 優(yōu)化打包

圖片增加

outputPath=images

輸入的文件夾到images文件夾中

P26知識(shí)點(diǎn) 自動(dòng)刪除生成dist包

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

在plugins中增加?[new CleanWebpackPlugin()]

詳情見?https://www.npmjs.com/package/clean-webpack-plugin

每次打包原先的dist刪除然后生成新的包

P27知識(shí)點(diǎn)? 總結(jié)打包

在package.json文件的scripts節(jié)點(diǎn)下 帶serve 生成到虛擬磁盤 反之亦然

但是 不帶serve 他不優(yōu)化 導(dǎo)致體積大?

帶--mode produvtion 重寫 mode 打包優(yōu)化體積小

P28知識(shí)點(diǎn) Source Map

在webpack.config.js 中增加

devtool:'eval-source-map',

P29與P30知識(shí)點(diǎn)?Source Map

發(fā)布之后 只提示行號(hào) 不暴露源代碼

?需要將設(shè)置改為

devtool:'nosources-source-map',

或者直接關(guān)閉Source Map 行號(hào)都不顯示

設(shè)置成“source-map” 在本地也能查看行號(hào)與源代碼 適合找BUG

p31? 知識(shí)點(diǎn)

在引入中“?../?”代碼以自己為中心 往上翻一層

例如在info.js 引入mag.js?

這樣很麻煩 而且不容易找到對(duì)應(yīng)位置 所以我們用‘@’簡(jiǎn)寫

在webpack.config.js 的module平級(jí)下新建

resolve:{

? ? ? ? ? ?alias:{

? ? ? ? ? ? ? ?'@':path.join(__dirname,'./src/')

? ? ? ? ? ?}

? ? ? }

代表@符號(hào)表示src 目錄

info.js修改為

成功運(yùn)行

P31 遇到BUG

上方提示成功 然后顯示無法識(shí)別@符號(hào)?

我看了三遍視頻 才發(fā)現(xiàn) 返回上一級(jí)是 ../? 而@配置這里寫的是 ./

這是老師的原版視頻 其實(shí)他就是寫了一個(gè)

改為./后

我估計(jì)他是和我一樣的問題?。?/p>

P32 在谷歌安裝插件

可以在下方下載插件 需要微信登陸一下

https://chrome.pictureknow.com/extension?id=d50143a5f53d406dbe992277bfc90521

原理學(xué)習(xí)完畢? 下面正式開始vue學(xué)習(xí)